7 Replies Latest reply on Apr 9, 2009 7:17 AM by nimo22

    DataTable Selected Row

      I'm having a very annoying problem with the rich:dataTable I'm using in my Seam app. I'm highlighting the row the user clicks on, and can successfully update the row's background color, but can't change the foreground color. The line commented out below has no effect. I'm using an a4j:support to call a javascript function onRowClick for the datatable, using the following code (found here, at 1.70: http://www.jboss.org/file-access/default/members/jbossrichfaces/freezone/docs/devguide/en/faq/faq.html)

       var oldRow;
       function changeColor( row )
       {
       if( oldRow != undefined ) {
       oldRow.style.backgroundColor = "#FFFFFF";
       }
      
       /* row.style.color = "red"; */
       row.style.backgroundColor = "#0090FF";
       oldRow = row;
       }
      


        • 1. Re: DataTable Selected Row
          nbelaevski

          Hi,

          Looks like someone is redefining it. I recommend to use Firebug and check nested elements classes

          • 2. Re: DataTable Selected Row

            Thanks - the problem was that the row's color property isn't used - looping through each cell in the row works fine. For reference, the code below works like a charm (sorry, it's wrapping a couple lines a little weird):

             var oldRow;
             function changeColor( row )
             {
             //Revert the previous selected row
             if( oldRow != undefined ) {
             oldRow.style.backgroundColor = "#{tableBackgroundColor}";
             for( i=0; i < oldRow.cells.length; i++ )
             oldRow.cells.style.color = "#{richSkin.generalTextColor}";
             }
            
             //Set the selected row's style
             row.style.backgroundColor = "#0090FF";
             for( i=0; i < row.cells.length; i++ )
             row.cells.style.color = "white";
            
             //Selected row now will be previous selected row next time
             oldRow = row;
             }
            


            • 3. Re: DataTable Selected Row
              nimo22

              Is there not a shorter way?

              Something like:

              <rich:extendedDataTable
              onRowClick="oldRow.style.backgroundColor = "#FFFFFF"/>

              but the only problem is, when clicking another row, the row before should be normalized (unclicked).

              • 4. Re: DataTable Selected Row
                ilya_shaikovsky

                so all the code listed above used to store previous row and apply proper classes :)

                • 5. Re: DataTable Selected Row
                  nimo22

                  Sorry, I have not clearly say the problem:

                  The script-code works well:

                  I have this in a datatable:

                  <rich:extendedDataTable ..>

                  <!--this activates my contextMenu --!>
                  <a4j:support event="onRowClick" action="#{myBean.select(row)}" oncomplete="#{rich:component('contexMenu')}.show(event, {row: '#{row.desc}'})"/>

                  <!--this changes the row-color of the selected row
                  <a4j:support event="onRowClick" onsubmit="changeColor(this)" ajaxSingle="true">
                  <f:param name="currentRow" value="#{row.id}"/>
                  </a4j:support>

                  ..
                  </rich:extendedDataTable>

                  But I cannot use two "onRowClick"-Events. How can I fit it into one?

                  • 6. Re: DataTable Selected Row
                    ilya_shaikovsky

                    So, use one support with a few f:actionListeners inside or just perform all the server side activities in one action. also you could call a few js methods in onsubmit and oncomplete..

                    • 7. Re: DataTable Selected Row
                      nimo22

                      works :-) thanks!