Win a copy of Murach's Python Programming this week in the Jython/Python forum!
  • Post Reply Bookmark Topic Watch Topic
  • New Topic

Scrolling table  RSS feed

 
Ayub ali khan
Ranch Hand
Posts: 395
2
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
Hi,

Can any one point me to any resources in building scrollable table in JSF + ajax.


Thank you.
Ayub
 
gee sasi
Greenhorn
Posts: 5
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
You can create a scrollable table using javascript.

scroller.js

var divContent = null;
var divHeaderRow = null;
var divHeaderColumn = null;
var divHeaderRowColumn = null;
var headerRowFirstColumn = null;
var x;
var y;
var horizontal = false;
var vertical = false;
function CreateScrollHeader(cont, scrollHorizontal, scrollVertical)
{
if (typeof cont == 'string') content = document.getElementById(cont).parentNode;
horizontal = scrollHorizontal;
vertical = scrollVertical;
if (content != null)
{
divContent = content;
var headerRow = divContent.childNodes[0].childNodes[0].childNodes[0];
x = divContent.childNodes[0].offsetWidth;
y = divContent.childNodes[0].offsetHeight;

divHeaderRow = divContent.cloneNode(true);
if (horizontal)
{
divHeaderRow.style.height = headerRow.offsetHeight;
divHeaderRow.style.overflow = "hidden";

divContent.parentNode.insertBefore(divHeaderRow, divContent);
divContent.childNodes[0].style.position = "absolute";
divContent.childNodes[0].style.top = "-" + headerRow.offsetHeight;

y = y - headerRow.offsetHeight;
}

divHeaderRowColumn = divHeaderRow.cloneNode(true);
headerRowFirstColumn = headerRow.childNodes[0];
divHeaderColumn = divContent.cloneNode(true);
divContent.style.position = "relative";

if (vertical)
{
divContent.parentNode.insertBefore(divHeaderColumn, divContent);
divContent.style.left = headerRowFirstColumn.offsetWidth;

divContent.childNodes[0].style.position = "absolute";
divContent.childNodes[0].style.left = "-" + headerRowFirstColumn.offsetWidth;
}
else
{
divContent.style.left = 0;
}

if (vertical)
{
divHeaderColumn.style.width = headerRowFirstColumn.offsetWidth;
divHeaderColumn.style.overflow = "hidden";
divHeaderColumn.style.zIndex = "99";

divHeaderColumn.style.position = "absolute";
divHeaderColumn.style.left = "0";
addScrollSynchronization(divHeaderColumn, divContent, "vertical");
x = x - headerRowFirstColumn.offsetWidth;
}

if (horizontal)
{
if (vertical)
{
divContent.parentNode.insertBefore(divHeaderRowColumn, divContent);
}
divHeaderRowColumn.style.position = "absolute";
divHeaderRowColumn.style.left = "0";
divHeaderRowColumn.style.top = "0";
divHeaderRowColumn.style.width = headerRowFirstColumn.offsetWidth;
divHeaderRowColumn.overflow = "hidden";
divHeaderRowColumn.style.zIndex = "100";
divHeaderRowColumn.style.backgroundColor = "#ffffff";

}

if (horizontal)
{
addScrollSynchronization(divHeaderRow, divContent, "horizontal");
}

if (horizontal || vertical)
{
window.onresize = ResizeScrollArea;
ResizeScrollArea();
}
}
}

// Resize scroll area to window size.
function ResizeScrollArea()
{

var height = document.documentElement.clientHeight - 294;
if (!vertical)
{
height -= divHeaderRow.offsetHeight;
}
var width = document.documentElement.clientWidth - 50;
if (!horizontal)
{
width -= divHeaderColumn.offsetWidth;
}
var headerRowsWidth = 0;
divContent.childNodes[0].style.width = x;
divContent.childNodes[0].style.height = y;

if (divHeaderRowColumn != null)
{
headerRowsWidth = divHeaderRowColumn.offsetWidth;
}

// width
if (divContent.childNodes[0].offsetWidth > width)
{
divContent.style.width = Math.max(width - headerRowsWidth, 0);
divContent.style.overflowX = "scroll";
divContent.style.overflowY = "auto";
}
else
{
divContent.style.width = x;
divContent.style.overflowX = "auto";
divContent.style.overflowY = "auto";
}

if (divHeaderRow != null)
{
divHeaderRow.style.width = divContent.offsetWidth + headerRowsWidth;
}

if (divContent.childNodes[0].offsetHeight > height)
{
divContent.style.height = Math.max(height, 80);
divContent.style.overflowY = "scroll";
}
else
{
divContent.style.height = y;
divContent.style.overflowY = "hidden";
}
if (divHeaderColumn != null)
{
divHeaderColumn.style.height = divContent.offsetHeight;
}

if (divContent.style.overflowY == "scroll")
{
divContent.style.width = divContent.offsetWidth + 17;
}
if (divContent.style.overflowX == "scroll")
{
divContent.style.height = divContent.offsetHeight + 17;
}

divContent.parentElement.style.width = divContent.offsetWidth + headerRowsWidth;
}

function getOnScrollFunction(oElement) {
return function () {
if (oElement._scrollSyncDirection == "horizontal" || oElement._scrollSyncDirection == "both")
oElement.scrollLeft = event.srcElement.scrollLeft;
if (oElement._scrollSyncDirection == "vertical" || oElement._scrollSyncDirection == "both")
oElement.scrollTop = event.srcElement.scrollTop;
};

}

// This function adds scroll syncronization for the fromElement to the toElement
// this means that the fromElement will be updated when the toElement is scrolled
function addScrollSynchronization(fromElement, toElement, direction) {
removeScrollSynchronization(fromElement);

fromElement._syncScroll = getOnScrollFunction(fromElement);
fromElement._scrollSyncDirection = direction;
fromElement._syncTo = toElement;
toElement.attachEvent("onscroll", fromElement._syncScroll);
}

// removes the scroll synchronization for an element
function removeScrollSynchronization(fromElement) {
if (fromElement._syncTo != null)
fromElement._syncTo.detachEvent("onscroll", fromElement._syncScroll);

fromElement._syncTo = null;
fromElement._syncScroll = null;
fromElement._scrollSyncDirection = null;
}

Note : adjust the value shown in the bold (ResizeScrollArea())if you are not getting scroller.In the above case table appears to the full length of the browser.if you table appears in some small area adjust the value.

In your JSF file add this

Add this on your body onload
CreateScrollHeader('form1:table1', true,false);

This is your form content

h:form id="form1"
div
div:div style="left: 20px; top: 250px; position: absolute;"
div:div
div:div
h:dataTable id="table1" ....
div:div - end tag
div:div -end tag
div:div -end tag

Note : div tag is own renderer component which gives you a div tag
Have a look of this link for DIV

http://www.jsftutorials.net/components/step1.html
 
Ayub ali khan
Ranch Hand
Posts: 395
2
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
Hi Sai,

Thank you for your inputs !! I also found the following code help ful :

http://developers.sun.com/prodtech/javatools/jscreator/learning/bookshelf/pearson/corejsf/datatables.pdf

Thank you

Ayub
 
Ayub ali khan
Ranch Hand
Posts: 395
2
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
Hi Sai,

Thank you for your inputs !! I will try your idea aswell. I also found the following code helpful :

DataTable

SUN PDFs

Thank you

Ayub
 
  • Post Reply Bookmark Topic Watch Topic
  • New Topic
Boost this thread!