You are viewing a plain text version of this content. The canonical link for it is here.
Posted to users@myfaces.apache.org by Steve S <tr...@gmail.com> on 2006/12/07 02:03:23 UTC
Finding an object in a dataTable
I have a dataTable with many rows. Using CSS, I've made a scrolling table.
I have a hidden field that contains the index of the currently selected
object, and when the page loads, it scrols down to that item if it isn't in
the visible part of the scrolling table.
I would like to have myfaces components take care of all my sorting, but the
problem is that when I sort, I can't seem to figure out where the selected
item is in the newly sorted list. I've played around with rowIndex and
t:updateActionListener, to no avail.
Anyone have any ideas how I can get the value I need?
Thanks in advance,
Steve
Re: Finding an object in a dataTable
Posted by Steve S <tr...@gmail.com>.
David Chandler <david.chandler <at> learnjsf.com> writes:
>
>
> Steve, thanks for posting the JS. I don't do much of it, but what you said
about walking the DOM to compute the offset seems most plausible. You could use
a hidden field to hold the unique ID of the selected item (perhaps the bank
name?), put an id attribute inside the <h:outputText> for each row, and then let
JS read the hidden field to get the ID of the selected item, look for that id in
the DOM, and compute the scroll distance.
> HTH,/dmc
You may be on to something. I have a database ID that is a unique number I can
use. I wonder how hard it would be to figure out what row I'm in, given that the
output text is in a <span> inside a <td> inside a <div> inside the <tr>. I'll
see if I can get something working when I get back from vacation.
Another approach I could try to take is to get the rowStyle and rowStyleClass
code working (I've seen mention of bugs in this area). If I can do this, then I
know I can get the <tbody> element easily by id, and there will be an array of
<tr> elements inside it whose styles I can look at.
Thanks for the input,
Steve
Re: Finding an object in a dataTable
Posted by David Chandler <da...@learnjsf.com>.
Steve, thanks for posting the JS. I don't do much of it, but what you said
about walking the DOM to compute the offset seems most plausible. You could
use a hidden field to hold the unique ID of the selected item (perhaps the
bank name?), put an id attribute inside the <h:outputText> for each row, and
then let JS read the hidden field to get the ID of the selected item, look
for that id in the DOM, and compute the scroll distance.
HTH,
/dmc
On 12/8/06, Steve S <triviaguy@gmail.com > wrote:
>
> David Chandler <david.chandler <at> learnjsf.com> writes:
>
> >
> >
> > Sounds like you need the id in the hidden field to be consistent both
> before
> and after sort, which it isn't if you're using a row index (1,2,3...)
> Could you
> instead put in the hidden field a unique property of the object in each
> row so
> that it wouldn't change?
> > By the way, I'd love to see your CSS code to scroll using this
> technique. Do
> you mind posting it or a how-to link?Thanks,/dmc
> >
> > -- David ChandlerDevelopment Coachlearnjsf.com
> >
>
>
> What I need for the javascript is an offset. I don't think having the id
> of
> the selected item helps because I won't know how far down on the list the
> selected item is. At the moment, I'm wondering if I can walk the DOM and
> find
> the row with the right style, then compute the offset from that. I can't
> get
> the rowStyle and rowStyleClass attrubutes of my dataTable to work right,
> so
> that's out for the moment. When I was doing the sorting manually, this
> all
> worked like a charm, but I can't seem to get it to work when myfaces does
> the
> sorting for me. I would like to get this working because it cleans up the
> code
> considerably.
>
> Here is the JSF/CSS/javascript for my table:
>
> Relevant parts of JSF:
> <body onload="scrollToActive()"
> <h:form id="bankForm">
> <%/*
> the scrollPosition holds the offset of the selected item. I don't
> want to see the value, but I need to have it rendered. Storing
> the
> value in the styleClass gives the JavaScript something to look
> for.
> */%>
> <h:outputText id="scrollPosition" styleClass="#{
> bankBean.scrollPosition}"
> value=""/>
> <t:div id="scrollingDiv" styleClass="scrollingDiv">
> <t:dataTable id="banklist"
> binding="#{bankBean.masterTable}"
> value="#{ bankBean.masterList}" var="bank"
> rowIndexVar="rowIndex"
> sortColumn="#{bankBean.sortAttribute}"
> sortAscending="#{bankBean.sortAscending }"
> rowStyle="#{bankBean.selectedRowIndex ==
> rowIndex ? 'activeTableCell' : 'tableCell'}"
> rowStyleClass="#{bankBean.selectedRowIndex ==
> rowIndex ? 'activeTableCell' : 'tableCell'}"
> border="1" headerClass="header3"
> preserveDataModel="false">
> <t:column sortable="true" sortPropertyName="name" width="400">
> <f:facet name="header">
> <h:outputText styleClass="tableHeader" value="Bank Name"/>
> </f:facet>
> <t:div styleClass="#{ bankBean.style}">
> <h:commandLink action="#{bankBean.changeActive}">
> <h:outputText styleClass="#{bankBean.style}" value="#{bank.name
> }">
> <e:convertTrim maxLength="50"/>
> </h:outputText>
> <t:updateActionListener property="#{
> bankBean.selectedRowIndex}"
> value="#{rowIndex}"/>
> </h:commandLink>
> </t:div>
> </t:column>
>
> MORE COLUMNS HERE
> </t:dataTable>
> </h:form>
> etc.
>
>
> Relevant parts of the CSS, there is more for non-IE, but I wanted to be
> brief:
>
> div.scrollingDiv {
> clear: both;
> overflow: auto; /* to scroll */
> height: 184px;
> width: 600px; /* 20 wider than the table for IE */
> border-left: 1px gray solid;
> border-right: 1px gray solid;
> border-bottom: 1px gray solid;
> text-align: left;
> /* width of the table in the div. For IE it's the actual table size */
> div.scrollingDiv table {
> float: left;
> empty-cells: show;
> width: 580px;
> }
> /* This will fix the header row in IE */
> div.scrollingDiv thead tr {
> position: relative;
> }
>
> The javascript:
> // this function will set the scroll position for the scrolling table
> function scrollToActive() {
> //alert("In scrollToActive!");
> var name = document.forms[0].name;
> var elem = document.getElementById(name + ":scrollingDiv");
> var pos= document.getElementById(name + ":scrollPosition");
> if( elem != null ) {
> elem.scrollTop = parseInt(pos.className);
> }
>
> }
>
>
>
>
>
>
>
--
David Chandler
Development Coach
learnjsf.com
Re: Finding an object in a dataTable
Posted by Steve S <tr...@gmail.com>.
David Chandler <david.chandler <at> learnjsf.com> writes:
>
>
> Sounds like you need the id in the hidden field to be consistent both before
and after sort, which it isn't if you're using a row index (1,2,3...) Could you
instead put in the hidden field a unique property of the object in each row so
that it wouldn't change?
> By the way, I'd love to see your CSS code to scroll using this technique. Do
you mind posting it or a how-to link?Thanks,/dmc
>
> -- David ChandlerDevelopment Coachlearnjsf.com
>
What I need for the javascript is an offset. I don't think having the id of
the selected item helps because I won't know how far down on the list the
selected item is. At the moment, I'm wondering if I can walk the DOM and find
the row with the right style, then compute the offset from that. I can't get
the rowStyle and rowStyleClass attrubutes of my dataTable to work right, so
that's out for the moment. When I was doing the sorting manually, this all
worked like a charm, but I can't seem to get it to work when myfaces does the
sorting for me. I would like to get this working because it cleans up the code
considerably.
Here is the JSF/CSS/javascript for my table:
Relevant parts of JSF:
<body onload="scrollToActive()"
<h:form id="bankForm">
<%/*
the scrollPosition holds the offset of the selected item. I don't
want to see the value, but I need to have it rendered. Storing the
value in the styleClass gives the JavaScript something to look for.
*/%>
<h:outputText id="scrollPosition" styleClass="#{bankBean.scrollPosition}"
value=""/>
<t:div id="scrollingDiv" styleClass="scrollingDiv">
<t:dataTable id="banklist"
binding="#{bankBean.masterTable}"
value="#{bankBean.masterList}" var="bank"
rowIndexVar="rowIndex"
sortColumn="#{bankBean.sortAttribute}"
sortAscending="#{bankBean.sortAscending}"
rowStyle="#{bankBean.selectedRowIndex ==
rowIndex ? 'activeTableCell' : 'tableCell'}"
rowStyleClass="#{bankBean.selectedRowIndex ==
rowIndex ? 'activeTableCell' : 'tableCell'}"
border="1" headerClass="header3"
preserveDataModel="false">
<t:column sortable="true" sortPropertyName="name" width="400">
<f:facet name="header">
<h:outputText styleClass="tableHeader" value="Bank Name"/>
</f:facet>
<t:div styleClass="#{bankBean.style}">
<h:commandLink action="#{bankBean.changeActive}">
<h:outputText styleClass="#{bankBean.style}" value="#{bank.name}">
<e:convertTrim maxLength="50"/>
</h:outputText>
<t:updateActionListener property="#{bankBean.selectedRowIndex}"
value="#{rowIndex}"/>
</h:commandLink>
</t:div>
</t:column>
MORE COLUMNS HERE
</t:dataTable>
</h:form>
etc.
Relevant parts of the CSS, there is more for non-IE, but I wanted to be brief:
div.scrollingDiv {
clear: both;
overflow: auto; /* to scroll */
height: 184px;
width: 600px; /* 20 wider than the table for IE */
border-left: 1px gray solid;
border-right: 1px gray solid;
border-bottom: 1px gray solid;
text-align: left;
/* width of the table in the div. For IE it's the actual table size */
div.scrollingDiv table {
float: left;
empty-cells: show;
width: 580px;
}
/* This will fix the header row in IE */
div.scrollingDiv thead tr {
position: relative;
}
The javascript:
// this function will set the scroll position for the scrolling table
function scrollToActive() {
//alert("In scrollToActive!");
var name = document.forms[0].name;
var elem = document.getElementById(name + ":scrollingDiv");
var pos= document.getElementById(name + ":scrollPosition");
if( elem != null ) {
elem.scrollTop = parseInt(pos.className);
}
}
Re: Finding an object in a dataTable
Posted by David Chandler <da...@learnjsf.com>.
Sounds like you need the id in the hidden field to be consistent both before
and after sort, which it isn't if you're using a row index (1,2,3...) Could
you instead put in the hidden field a unique property of the object in each
row so that it wouldn't change?
By the way, I'd love to see your CSS code to scroll using this technique. Do
you mind posting it or a how-to link?
Thanks,
/dmc
On 12/6/06, Steve S <tr...@gmail.com> wrote:
>
> I have a dataTable with many rows. Using CSS, I've made a scrolling
> table. I have a hidden field that contains the index of the currently
> selected object, and when the page loads, it scrols down to that item if it
> isn't in the visible part of the scrolling table.
>
> I would like to have myfaces components take care of all my sorting, but
> the problem is that when I sort, I can't seem to figure out where the
> selected item is in the newly sorted list. I've played around with rowIndex
> and t:updateActionListener, to no avail.
>
> Anyone have any ideas how I can get the value I need?
>
> Thanks in advance,
>
> Steve
>
--
David Chandler
Development Coach
learnjsf.com