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 <[EMAIL PROTECTED] > 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
