12

I'm using PrimeFaces v.5 with this version a new component is released that ColumnToggler, when view is rendered, refreshed all checkbox are checked as a default operation.

What I need to do is;

  • to uncheck some columns when I initialize the view,
  • make p:columnToggler remember checked and unchecked options when a refresh operation occurs on p:dataTable
Jasper de Vries
  • 19,370
  • 6
  • 64
  • 102
Ismail Sahin
  • 2,640
  • 5
  • 31
  • 58

4 Answers4

17

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

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

You can ofcourse use EL in the visible attribute by colum index (reordering becomes more difficult)

<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 through the columnToggler checkbox

By using the ajax toggle event

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

You can update the state of the visibilityModel server side

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

See this PrimeFaces blog entry for full example to actually keep/store the state of the visibility server side so it can be reused later

Jasper de Vries
  • 19,370
  • 6
  • 64
  • 102
John Alexander Betts
  • 4,718
  • 8
  • 47
  • 72
  • I've some problem when show the columns hidden, the columns are untidy, you now why? – Cristian Oct 16 '15 at 19:50
  • I would like to see an image to understand you how the columns are untidy – John Alexander Betts Oct 18 '15 at 02:27
  • I am using dynamic columns. I would like few columns to be visible by default & few invisible. How can I set the visible attribute to true/false conditionally ? – Shikha Dhawan Jan 07 '16 at 10:57
  • @Shikha – Max Jan 22 '16 at 20:29
  • `visible="false"` works if initially you want to set the column invisible. But when you visible it and sortBy the column, the column unhide again, just left column header – AI. Nov 11 '16 at 03:19
  • Do you have a better solution for this [question](http://stackoverflow.com/questions/40540523/visible-false-unhide-a-column-again-when-sortby-is-clicked) ? – AI. Nov 11 '16 at 03:20
  • I would enhance it using a Map and providing default value in the stateful visibility check like `visible="#{visibilityModel.isVisible(1, false)}"` – djmj Jun 28 '17 at 07:36
  • Saved my day. Thanks! –  Sep 05 '18 at 18:36
6

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

PrimeFaces >= 5.2

See the other answer in this question.

workaround for < 5.2

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

first add styleClass="not-show-at-start" to your column that you want to insvisibe at start to access in 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 code below in it, this function will re assign render function of 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();
}
Jasper de Vries
  • 19,370
  • 6
  • 64
  • 102
Ismail Sahin
  • 2,640
  • 5
  • 31
  • 58
  • yes it is :) but it has a problem with "update" view command. when page is updated all checkboxes becomes checked in some cases that I couldn't understand yet. – Ismail Sahin Oct 14 '14 at 21:11
  • this work! but have some problems. like: * when use multiple ordering in datatable, the toogler not work and all columns are visible :\ you knows this problem? – Marin Oct 27 '14 at 15:32
0

An alternative solution could be to set directly the checkbox you want to uncheck after you load the page. It's a less elegant solution but it works. I did it this way:

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

By this way, after loading the page, javascript hide the column referenced by chechbox number 18 but the checkbox is still present on the columnToggler for the user to check it and show the column again if he wants to.

Greetings

Damián
  • 17
  • 2
0

Complementing Damián answer:

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

This will do the job, clicking the columntoggler chkbox after page load..

@Edit

You should set as toggleable="false" the columns you don't want to hide (always displayed)

Reason: if you use the javascript method to "override" primefaces toggler, sometimes the datatable column shown can be displayed wrong in the layout (out of the table size, for an example, like happened with me), that's why i decided to use the method described above..

Simego
  • 431
  • 5
  • 16
  • 1
    but all of them, not specific ones that you want to be hidden? – Ismail Sahin Oct 20 '14 at 12:42
  • this way all of them will be hidden, i forgot to mention that you should specify toggleable="false" to always show who you want.. – Simego Oct 20 '14 at 15:25
  • hope it works, it solved my problem :D now i can work with dynamic tables ^^, primefaces should implement something like this in the future :/ – Simego Oct 20 '14 at 19:14