How can I force an easyui datagrid to resize its rows after hiding column?

0
votes

I have a CRUD page which displays data in a JQuery EasyUI datagrid. There are "default" and "optional" columns and the user can hide and show optional columns using a menu with checkable elements.

The hide/show parts work well, however I cannot figure out how to correctly resize everything after the column changes.

Here's what I tried:

Option 1: Set the hidden propery of the column

// in the checkbox's onclick event
for(var i = 0; i < columns[0].length; i ++) {
  if(columns[0][i].fields == `attr_${check.attr("data-attrid")}`) {
    columns[0][i].hidden = !check.is(":checked");
    // adding or removing the next line doesn't change the results - originally width was set to 100
    // columns[0][i].width = 100;
    break;
  }
}

dg.datagrid({ columns: columns });
// adding or removing the next line doesn't change the results
// dg.datagrid("resize");

Using the hidden property, I can successfully remove or add columns, however when I show a previously hidden column, it becomes so small that it cannot display the entire data anymore. Resetting the columns "width" property to its original value, and/or calling resize on the datagrid after setting the new column values doesn't change anything.

Option 2: call showColumn and hideColumn on the datagrid

// in the checkbox's onclick event
dg.datagrid(check.is(":checked") ? "showColumn" : "hideColumn", `attr_${check.attr("data-attrid")}`);

This option successfully shows or hides the given column. On hiding, it resizes the remaining columns to fit the datagrid and leave space for a scroll bar. However on showing it resizes the column titles to fill the full datagrid, but resizes the rows containing the data to leave a small space for a scroll bar, placing the column titles and data out of sync in terms of where they are shown. If I call resize after showing/hiding, the columns and their titles are the same width again, but they leave space for a full column, not just the scroll bar, which looks hideous.

Environment

  • JQuery version: 3.4.1
  • easyui version: 1.9.4
  • easyui plugins: datagrid-filter, datagrid-cellediting, datagrid-detailview
1
datagridjquery-easyui

1 Answers

0
votes

Because of some weird caching issue, you have to use option 2 and call resize twice.

dg.datagrid(shouldShow ? "showColumn" : "hideColumn", "fieldName");
dg.datagrid("resize");
dg.datagrid("resize");

The columns now leave a small space for a scroll bar, but otherwise fill the datagrid and the columns appear exactly under their title.