Search code examples
jqueryprimefacesjsf-2toggle

How to check SelectAll when user selects the data-table all individual check-box column toggler?


Displaying columns in data table based on column selection in <p:columnToggler> .

In that column selection when I check all the check-box individually selectAll should be checked.

How to check SelectAll when user selects the data-table all check-box column toggler individually ?

Toggler Code in datatable:

<f:facet name="header">
      <h:panelGroup layout="block" styleClass="columnSty vetselectStyle">
        <p:commandButton id="toggler" value="" global="false" onclick="addSelectAll();" type="button" title="Column Selection"/>
          <p:columnToggler datasource="vetDataTable" id="colTogglerVetDataTable" trigger="toggler">
          </p:columnToggler>
     </h:panelGroup>
</f:facet>

Code to add Select All Check Box in Column Selection:

function addSelectAll(){
    $("#li_togglerSelectAll")&amp;&amp;
    $("#li_togglerSelectAll").remove(),
    $(".ui-columntoggler-items").prepend('<li id="li_togglerSelectAll" class="selectAllSty"> <input type="checkbox" id="togglerSelect" onclick="selectAllInToggler(document.getElementById(\'togglerSelect\').checked);"/><label for="togglerSelect">SelectAll</label></li>')
}

function selectAllInToggler(a){
    $(".ui-columntoggler-items").find("li").find("> .ui-chkbox > .ui-chkbox-box >.ui-chkbox-icon").each(function(b){a?$(this).hasClass("ui-icon-blank") &amp;&amp; $(this).click():$(this).hasClass("ui-icon-check") &amp;&amp; $(this).click()
    })
}

Solution

  • Here is the solution:

    SelectAll when user selects the data-table all individual check-box column toggler

    <h:panelGroup>
       <p:commandButton id="toggler" value="" global="false" onclick="addSaveButton();selectAll();" type="button" title="Column Selection" />
       <p:columnToggler datasource="vetDataTable" id="colTogglerVetDataTable" trigger="toggler">
        <p:ajax event="toggle" oncomplete="selectAll();" />
       </p:columnToggler>
      </h:panelGroup>
    

    function selectAll() {
               var a=[],b=[]; 
               $(".ui-columntoggler-items").find("li").find("> .ui-chkbox > .ui-chkbox-box >.ui-chkbox-icon").each(function()
                      {
                        var d="";
                        $(this).hasClass("ui-icon-blank")?(
                                d=$(this).parent().parent().parent().find("label").text(),
                                a.push(d.trim())):$(this).hasClass("ui-icon-check")&amp;&amp;
                        (       d=$(this).parent().parent().parent().find("label").text(),
                                b.push(d.trim()))
                       });
                        //alert(a.length);
                        //alert(b.length);
                        if(a.length == '0')
                        $('#togglerSelect').prop('checked', true);
                        else
                        $('#togglerSelect').prop('checked', false);
           }