Datatable edited row headertext disappears when responsive

Post Reply
javacurt
Posts: 3
Joined: 18 May 2017, 21:44

22 Jul 2020, 21:55

When a datatable is editable and a row is put in edit mode and then exits edit mode the titles for that row disappear. The titles remain on the full size datatable but no longer exist when the table is in reflow (responsive) layout. It does not matter if the row was toggled in and out of edit mode when it was full size or responsive. The only way to bring the title back is to reload the page.

The html code that disappears is the following:

Code: Select all

<span class="ui-column-title">Year</span>
To reproduce this I used the project demo that came with Sapphire. Some minor changes to data.xhtml where made using the showcase code to make the first table editable.
  • Added

    Code: Select all

    editable="true" editMode="row"
    to the 'List of Cars' datatable.
  • Added the editor column like in the showcase

    Code: Select all

    <p:column style="width:35px"><p:rowEditor /> </p:column>

mert.sincan
Posts: 4569
Joined: 29 Jun 2013, 12:38

30 Jul 2020, 14:35

Editable DataTable doesn't support the responsive feature. Please try the following css;

Code: Select all

@media (max-width: 640px) {
   .ui-datatable-reflow .ui-datatable-data tr.ui-row-editing td.ui-editable-column, 
   .ui-datatable-reflow .ui-datatable-data td.ui-cell-editing {
      padding: 0.714em 0.857em;
      display: flex;
   }
}
Best Regards,

javacurt
Posts: 3
Joined: 18 May 2017, 21:44

06 Aug 2020, 21:30

Thanks for the response Aragorn
Unfortunately that doesn't help. I think the problem is more than css. The html

Code: Select all

<span class="ui-column-title">Year</span>
no longer exists after the row save or cancel is performed. I believe the problem is in the components.js. There is a function

Code: Select all

initReflow: function ()
that is called when the page is loaded that adds the span with the ui-column-title. But when the save or cancel is clicked on the row there is a function

Code: Select all

updateRow: function (b, a)
that replaces the html and does not add that span with the ui-column-title back. It could be enough to call initReflow after the replace but I'm not sure how to make changes to this file.

Thanks again.

mert.sincan
Posts: 4569
Joined: 29 Jun 2013, 12:38

21 Aug 2020, 12:28

Hi @javacurt,

Thanks a lot for the info. Could you please create a ticket on PrimeFaces Github about this?

Best Regards,

Post Reply

Return to “Sapphire - PrimeFaces”

  • Information
  • Who is online

    Users browsing this forum: No registered users and 1 guest