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")&&
$("#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") && $(this).click():$(this).hasClass("ui-icon-check") && $(this).click()
})
}
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")&&
( 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);
}