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

    Row selection and highlighting

    mpgong

      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
          healeyb

          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.