14 Replies Latest reply on Mar 30, 2011 3:52 AM by aniljcb

    dataTable selected row indicator

    pedalshoe

      Hi,
      I'm trying to highlight the clicked row in a rich:dataTable. using one of the events. Is there a way to do this? Hovering over a row and coloring every other row is understandable.. but to show the last clicked row is what i want to indicate back to the user. Is there a JQuery way of doing this using the rich:jQuery tag ?

      rich:scrollableDataTable has an attribute and handles this "out the box" but it has other features that are over kill for what I'm trying to do. rich:scrollableDataTable doesn't allow me to disable any of the features i don't need.

      Basically I have a single column table where when a row is clicked i have to indicate that to the user by highlighting the row. If another row in this table is selected, un-highlight the previous row and highlight the new selected row.


      Thank You,
      -Christopher

        • 1. Re: dataTable selected row indicator
          ilya_shaikovsky

          how about extendedDataTable?

          • 2. Re: dataTable selected row indicator
            pedalshoe

            I tried the extendedDataTable. That was my first choice, but I couldn't disable the column header controls. I then tried the scrollableDataTable.. that just introduced all the scroll bars and resizeable column widths.

            • 3. Re: dataTable selected row indicator

              I have implemented it like this:

              <rich:dataTable
               id="datatable"
               rows="#{controller.pageSize}"
               var="item" value="#{controller.model}"
               >
              <rich:column styleClass="#{controller.isRowSelected(item) ? 'selectedRow' : 'normalRow' }">
              </rich:column>
              </rich:dataTable>


              You just need a isRowSelected method in your controller. Mine looks like this:

              public boolean isRowSelected(T row)
               {
               if (row != null && entity != null)
               {
               if (entity.getId().equals(row.getId()))
               {
               return true;
               }
               }
              
               return false;
               }
              


              And of course, you need to supply the CSS-classes:

              .selectedRow
              {
               background-color: #ccffff;
              }
              
              .normalRow
              {
               background-color: #ffffff;
              }


              HTH,
              John

              • 4. Re: dataTable selected row indicator
                pedalshoe

                Thanks for the reply. I'm going to try this and let you know how it worked out for me.
                -Christopher

                • 5. Re: dataTable selected row indicator
                  bean_jr

                  Hi,

                  I'm trying to implement your suggestion but I got the following error:

                  " javax.servlet.ServletException: Error Parsing: #{processingBean.isRowSelected(row1) ? 'selectedRow' : 'normalRow'}
                  javax.faces.webapp.FacesServlet.service(FacesServlet.java:277)
                  ...

                  org.apache.el.parser.ParseException: Encountered "(" at line 1, column 31.
                  Was expecting one of:
                  "}" ...
                  "." ...
                  "[" ...
                  ">" ...
                  "gt" ...
                  "<" ...
                  "lt" ...
                  ">=" ...
                  "ge" ...
                  "<=" ...
                  "le" ...
                  "==" ...
                  "eq" ...
                  "!=" ...
                  "ne" ...
                  "&&" ...
                  "and" ...
                  "||" ...
                  "or" ...
                  "*" ...
                  "+" ...
                  "-" ...
                  "?" ...
                  "/" ...
                  "div" ...
                  "%" ...
                  "mod" ...
                  "

                  I tried to do If statement in other way unsuccefully. Can you help me?

                  is it possible to show all the bean code?

                  thank you in advance

                  cheers

                  Filipe

                  • 6. Re: dataTable selected row indicator

                    Please post the markup of your datatable.

                    • 7. Re: dataTable selected row indicator

                      btw: I use the el-api that comes with SEAM I think, not the one from Apache. That should be the problem.

                      • 8. Re: dataTable selected row indicator
                        bean_jr


                        <rich:dataTable id="importFilesList" style="width:1000px"
                        rows="10" rowClasses="odd-row,even-row" reRender="ds1"
                        columnClasses="col" value="#{processingBean.importFileList}"
                        var="row1" >
                        <a4j:support event="onRowDblClick"
                        actionListener="#{processingBean.rowFileSelected}"
                        action="#{processingBean.selectFileRow}">
                        <f:param value="#{row2.FILE_CODE}" name="current" />
                        </a4j:support>

                        I'm using el-ri.jar that in apache. is it a problem?

                        thnak you for your reply

                        Filipe

                        • 9. Re: dataTable selected row indicator
                          nbelaevski

                          Hi Filipe,

                          That's not supported by EL standard:

                          #{processingBean.isRowSelected(row1) ? 'selectedRow' : 'normalRow'}
                          .
                          Read this: http://www.ilikespam.com/blog/el-function-parameters-with-jboss-el

                          • 10. Re: dataTable selected row indicator
                            pedalshoe

                            Hi,
                            I finally got a chance to get back to this. I'm using a dataTable with @DataModel and @DataModelSelection in the Bean. When a user clicks on a row i would like to clear any other selectedRow and just show what was last clicked. What I'm seeing is with the isSelectedRow() technique is all the rows being selectedRow the first rendering of the dataTable. I need find a solution that will only show one row that is selected (like in extendedDataTable or scrollableDataTable).
                            Thank you,
                            -Christopher

                            • 11. Re: dataTable selected row indicator
                              pedalshoe

                              I figured out what I needed to do using jQuery. I'm using rich:dataTable and jQuery to indicate the selected row. I'm running this in SEAM 2.1.2 with facelets.

                              In the header of the webpage:

                              <script type="text/javascript">
                               jQuery(document).ready(function(){
                              
                               // select the table tbody element from rich:dataTable
                               jQuery("#my_form\\:my_TableID_1\\:tb tr td").click(function() {
                               jQuery(".selected_row").removeClass("selected_row");
                               jQuery(this).addClass("selected_row");
                               });
                              
                              
                               });
                               </script>
                               <style type="text/css" >
                               .selected_row {
                               background-color:red;
                               }
                               </style>
                              


                              in the body of the page:
                              <rich:dataTable value="#{value}"
                               var="v"
                               id="my_TableID_1"
                               onRowMouseOver="this.style.backgroundColor='#F1F1F1'"
                               onRowMouseOut="this.style.backgroundColor='#{a4jSkin.tableBackgroundColor}'">
                               <rich:column label="my label">
                               <f:facet name="header">
                               <h:outputText value="my label"/>
                               </f:facet>
                               <h:outputText value="#{v.value}"/>
                               </rich:column>
                              </rich:dataTable>
                              


                              this gave me the hover effect with the mouse and when I selected the row the color changed to indicate the selected row.

                              -Christopher

                              • 12. Re: dataTable selected row indicator
                                pedalshoe

                                The only problem I have now is when I include multiple rich:dataTables on one page. The jQuery works for only one table. Does anyone know why this is happening?
                                In the header i added another jQuery selector for the 2nd table:

                                <script type="text/javascript">
                                 jQuery(document).ready(function(){
                                
                                
                                // select the table tbody element from rich:dataTable #1
                                 jQuery("#my_form\\:my_TableID_1\\:tb tr td").click(function() {
                                 jQuery(".selected_row").removeClass("selected_row");
                                 jQuery(this).addClass("selected_row");
                                 });
                                
                                
                                // select the table tbody element from rich:dataTable #2
                                 jQuery("#my_form\\:my_TableID_2\\:tb tr td").click(function() {
                                 jQuery(".selected_row").removeClass("selected_row");
                                 jQuery(this).addClass("selected_row");
                                 });
                                
                                
                                 });
                                
                                
                                </script>
                                


                                Thank you
                                -Christopher

                                • 13. Re: dataTable selected row indicator
                                  pedalshoe

                                  Finally,
                                  I needed to:
                                  1. have two tables. the first one was loaded when the user gets to the page. The second table will reRender each time the user selected a row.
                                  2. indicate the selected row from each table.

                                  In order to do what I needed, I went with the <rich:jQuery /> tag finally, and got everything I needed to work, the way I needed it to work.

                                  My final env:

                                  SEAM2.1.2
                                  RichFaces3.3.1 (SEAM2.1.2 comes with v3.3.0)
                                  JBossAS4.2.3


                                  For table1:
                                  <rich:dataTable id="my_TableID_1" var="myVar"
                                  onRowMouseUp="selectRowT1(this)" >
                                   <a4j:support event="onRowClick" reRender="my_TableID_2"
                                   action="#{myBean.myAction}" />
                                   <rich:column >
                                   <f:facet name="header">
                                   <h:outputText value="ColName"/>
                                   </f:facet>
                                   <h:outputText value="#{myVar.prop}"/>
                                   </rich:column>
                                  </rich:dataTable>
                                  <rich:jQuery name="selectRowT1" timing="onJScall"
                                   query="click(function(){
                                   jQuery('#my_form\\:my_TableID_1\\:tb tr.selected_row').removeClass('selected_row');
                                   jQuery(this).addClass('selected_row');})" />
                                  


                                  For table2:
                                  <rich:dataTable id="my_TableID_2" var="myVar"
                                  onRowMouseUp="selectRowT2(this)" >
                                   <a4j:support event="onRowClick" reRender="selections"
                                   action="#{myBean.myAction2}" />
                                   <rich:column >
                                   <f:facet name="header">
                                   <h:outputText value="ColName"/>
                                   </f:facet>
                                   <h:outputText value="#{myVar.prop}"/>
                                   </rich:column>
                                  </rich:dataTable>
                                  <rich:jQuery name="selectRowT2" timing="onJScall"
                                   query="click(function(){
                                   jQuery('#my_form\\:my_TableID_2\\:tb tr.selected_row').removeClass('selected_row');
                                   jQuery(this).addClass('selected_row');})" />
                                  


                                  -Christopher

                                  • 14. Re: dataTable selected row indicator
                                    aniljcb

                                    Thank you Christopher, i was truggling with the issue of triggering the jquery when a row is selected. You solved my problem