Win a copy of Rust Web Development this week in the Other Languages forum!
  • Post Reply Bookmark Topic Watch Topic
  • New Topic
programming forums Java Mobile Certification Databases Caching Books Engineering Micro Controllers OS Languages Paradigms IDEs Build Tools Frameworks Application Servers Open Source This Site Careers Other Pie Elite all forums
this forum made possible by our volunteer staff, including ...
Marshals:
  • Tim Cooke
  • Campbell Ritchie
  • Ron McLeod
  • Liutauras Vilda
  • Jeanne Boyarsky
Sheriffs:
  • Junilu Lacar
  • Rob Spoor
  • Paul Clapham
Saloon Keepers:
  • Tim Holloway
  • Tim Moores
  • Jesse Silverman
  • Stephan van Hulst
  • Carey Brown
Bartenders:
  • Al Hobbs
  • Piet Souris
  • Frits Walraven

Scrolling table

 
Ranch Hand
Posts: 399
2
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
Hi,

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


Thank you.
Ayub
 
Greenhorn
Posts: 5
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • 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: 399
2
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • 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: 399
2
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • 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
 
WHAT is your favorite color? Blue, no yellow, ahhhhhhh! Tiny ad:
Building a Better World in your Backyard by Paul Wheaton and Shawn Klassen-Koop
https://coderanch.com/wiki/718759/books/Building-World-Backyard-Paul-Wheaton
reply
    Bookmark Topic Watch Topic
  • New Topic