How can I hide columns in p: dataTable first with p: columnToggler

Question

I use PrimeFaces v.5 with this version, a new component is released, which is ColumnToggler , when the view is rendered, the updated checkbox is marked as the default operation.

What do I need to do:

• to remove some columns when initializing the view,
• make p:columnToggler remember marked and unchecked parameters when update operation occurs on p:dataTable

Answer 1

The best solution depends on the version of PrimeFaces you are using.

PrimeFaces> = 5.2

See another answer in this question.

workaround for <5.2

You need to solve the first problem manually by overriding your own ColumnToggler.prototype.render() function

first add styleClass="not-show-at-start" to your column that you want to include at the beginning to access the javascript render () function;

 <!--This column will not be shown at start--> <p:column headerText="Cloumn to hide initially" width="70" styleClass="not-show-at-start"> <h:outputText value="#{entityVar.nmProcessOwner}" /> </p:column> <!--This column will be shown at start--> <p:column headerText="Column to show initially" width="70"> <h:outputText value="#{entityVar.nmProcessOwner}" /> </p:column> 

secondy create a javascript file and paste the code below into it, this function will assign the rendering function to ColumnToggler

 PrimeFaces.widget.ColumnToggler.prototype.render = function() { //variable for creating id referance for each checkbox in ColumnToggler var id=0; this.columns = this.thead.find("> tr > th:visible:not(.ui-static-column)"); this.panel = $("<div></div>").attr("id", this.cfg.id).addClass("ui-columntoggler ui-widget ui-widget-content ui-shadow ui-corner-all").append('<ul class="ui-columntoggler-items"></ul').appendTo(document.body); this.itemContainer = this.panel.children("ul"); for (var a = 0; a < this.columns.length; a++) { id++; var b = this.columns.eq(a); $('<li class="ui-columntoggler-item"><div class="ui-chkbox ui-widget"><div id="cb'+id /*creating id for each checkbox for accessing later*/+'" class="ui-chkbox-box ui-widget ui-corner-all ui-state-default ui-state-active"><span class="ui-chkbox-icon ui-icon ui-icon-check"></span></div></div><label>' + b.children(".ui-column-title").text() + "</label></li>").data("column", b.attr("id")).appendTo(this.itemContainer); //access clumns using class reference(not-show-at-start) created in jsf page if(b.hasClass( "not-show-at-start")){ //access checkbox using id attribute created above and uncheck it //this will hide columns that have "not-show-at-start" class this.uncheck($('#cb'+id)); } } this.hide(); } 

Answer 2

In Primefaces 5.2 you can set the p: column visible attribute to false

 <p:column ... visible="false"> 

You can use EL in the visible attribute on the colum index (reordering becomes more complicated)

 <p:column ... visible="#{visibilityModel.visibleList[1]}"> 

It hides the column at the beginning depending on the return value, and you can show / hide the column using the columnToggler checkbox

Using the ajax toggle event

 <p:ajax event="toggle" listener="#{viewBean.onToggle}" /> 

You can update the visibility side of the server model

 public void onToggle(ToggleEvent e) { list.set((Integer) e.getData(), e.getVisibility() == Visibility.VISIBLE); } 

See this PrimeFaces blog post for a complete example to actually save / save the visibility server state so it can be reused later

Answer 3

An alternative solution would be to set the flag directly that you want to clear after loading the page. This is a less elegant solution, but it works. I did it as follows:

<h:body onload="javascript: $('.ui-chkbox-box')[18].click();">

Thus, after loading the javascript page, hide the column referenced by chechbox number 18, but the checkbox is still present in the Toggler column so that the user can check it and show the column if he wants.

Hello

Answer 4

Supplement Damián answer:

 $(function() { $('.ui-columntoggler-items .ui-chkbox .ui-chkbox-box').click(); }); 

This will complete the task by clicking chkbox columntoggler after the page loads.

@Edit

You must specify toggleable="false" columns that you do not want to hide (always displayed)

Reason: if you use the javascript method to “override” toggler dot fonts, sometimes the displayed display column may not display correctly in the layout (outside the size of the table, for example, as happened to me), so I decided to use the method described above.