CODEWITHSUNDEEP
primefacesrowexpansion
tikeman
tikeman

Reputation: 39

primefaces datatable rowexpansion with hidden column issue

I'm using PrimeFaces 6.0 I aim to create a data table with rowexpansion but I don't want to display rowtoggler. Expansion will occur on row selection. For this I have added to my code:

$(document).ready(function() {
      rowExpansion(PF('carDataTable'));
   });

function rowExpansion(dataTable) {
      //dataTable should be the widgetVar object
      var $this = dataTable;
      $this.tbody.off('click.datatable-expansion', '> tr')
         .on('click.datatable-expansion', '> tr', null, function() {
            //toggle the current row the old toggler
            $this.toggleExpansion($(this).find('div.ui-row-toggler'));
          });
}

Rowtoggler column is hidden as:

<p:column style="display:none">
    <p:rowToggler />
</p:column>

The problem is that when row is expanded, the size of rows shrink. This also happens when any hidden column other than rowtoggler column exists. How it appears without expansion and with expansion is as follows: before expansion after expansion

any workaround or explanation is appreciated.

Upvotes: 0

Views: 1444

Answers (2)

tikeman
tikeman

Reputation: 39

The issue is solved with a workaround. Instead of setting column property as display:none, hiding it by setting 0 size seems working.

<p:column style="width:0px;height:0px;padding:0px;border:0px">
    <p:rowToggler />
</p:column>

Upvotes: 1

William Morris
William Morris

Reputation: 31

Just an update but now you can set the column visibility to false.

<p:column visible="false">
  <p:rowToggler/>
</p:column>

Upvotes: 1

Related Questions