1 Reply Latest reply on Jan 12, 2012 9:28 AM by Brendan Healey

    Row selection and highlighting

    Michael G Novice

      Hello,

       

      I'm wondering how to best add row selection and highlight to a collapsiblesubtable.  I took a look at the datatable show case and tried the styling example but to know avail.  Haven't tried the row selection example but wanted to get the row highlighting out of the way first.

       

      I was able to get this to work fine with extendeddatatables but had to switch to collapsible.  Could anyone point to an example as to how to do both?

       

      I've tried this:

       

              <rich:jQuery selector=".odd-row" event="mouseover" query="jQuery(this).addClass('active-row')" />
              <rich:jQuery selector=".even-row" event="mouseover" query="jQuery(this).addClass('active-row')" />
              <rich:jQuery selector=".odd-row" event="mouseout" query="jQuery(this).removeClass('active-row')" />
              <rich:jQuery selector=".even-row" event="mouseout" query="jQuery(this).removeClass('active-row')" />
      

       

      and adding rowClasses to the collasibleSubTable - but not working.

       

      Thanks

        • 1. Re: Row selection and highlighting
          Brendan Healey Master

          Hi, something like this should do it. You could pass the row index as an a4j:param to a a4j:jsFunction, and then

          figure out the corresponding Collection entry I guess (maybe other ways of doing this?).

           

          private List<String> tableData = Arrays.asList("one", "two", "three", "four");

           

               <h:dataTable id="testTable" value="#{mainView.tableData}" var="var">

                  <h:column>

                      <h:outputText value="#{var}"/>

                  </h:column>

              </h:dataTable>

              <script type="text/javascript">

                  jQuery(function($) {

                      $('#testTable tr').click(function() {

                          alert('hello ' + $(this).index());

                          $(this).css('background-color','red');

                      });

                  });

              </script>

           

          #testTable tr:hover {

                  background-color: #ff8080;

          }

           

          Regards,

          Brendan.