myfaces-users mailing list archives

Site index · List index
Message view « Date » · « Thread »
Top « Date » · « Thread »
From "David Chandler" <david.chand...@learnjsf.com>
Subject Re: Finding an object in a dataTable
Date Fri, 08 Dec 2006 19:47:39 GMT
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

Mime
View raw message