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);
}
}
