Grid Frozen Column

[Jean Caiza]

Hello Team,

How can i show/hide a Frozen column correctly without get this next error after hide frozen column and move the scroll

[Rajapandiyan Settu]

Hi Jean,

Thanks for contacting Syncfusion support.

You can show or hide the grid columns dynamically by using the showColumns and hideColumns methods of Grid. Find the below documentation for more information.

Show/ Hide columns: https://ej2.syncfusion.com/react/documentation/grid/columns/columns/#show-or-hide-columns-by-external-button

Sample: https://stackblitz.com/edit/react-esrvej?file=index.js

Still, if you face the same issue, kindly share the below details to validate further.

1. Share the complete Grid code files and package.json file.
2. What are the features you have used in the Grid?
3. Share the video demo of the reported problem.
4. If possible, share the issue reproducible sample or try to replicate the issue in given sample.

Regards,

Rajapandiyan S

[Jean Caiza]

Hello Rajapandiyan,

Thanks for reply, here is a sample how i hide/show a column (frozen)

https://codesandbox.io/s/zen-bhaskara-t6x9d2?file=/src/App.js

you can see the error when hiding the column when you move the scroll, we would like your support to be able to do it correctly since it is not correct for these types of errors to be displayed,

[Rajapandiyan Settu]

Jean,

Thanks for sharing the details with us.

By analyzing your code, we found that you are having only one frozen column and you want to show and hide it through the toolbar button click. We suggest you to use the below code to dynamically show and hide that single freeze column.

[App.js]

  const onToolbarClick = (args) => {

    const { item } = args;

    const g = grid.current;

    if (item.text === "Open") {

      // remove the freeze property

      g.getColumnByField("command").freeze = undefined;

      // set the visible property as false to hide that column

      g.getColumnByField("command").visible = false;

      // refresh the Grid

      g.refreshColumns();

      g.toolbarModule.toolbar.enableItems(0, false);

      g.toolbarModule.toolbar.enableItems(1);

    }

    if (item.text === "Close") {

      // freeze the column at right side

      g.getColumnByField("command").freeze = "Right";

      // show the column

      g.getColumnByField("command").visible = true;

      // refresh the Grid

      g.refreshColumns();

      g.toolbarModule.toolbar.enableItems(0);

      g.toolbarModule.toolbar.enableItems(1, false);

    }

  };

 

Sample: https://codesandbox.io/s/stoic-bassi-vb7ols?file=/src/App.js

Regards,

Rajapandiyan S

[Jean Caiza]

Thanks it woks!.

I have a question, I see that the refreshColumn() method has visually updated the Grid, does that have any secondary effect? I mean, for example, remount the dataSource?

[Jean Caiza]

i want to hide toolbar items without managing states, i do it but when refreshColumn method triggers, the toolbar items don't hide, any ideas how to do it correctly? (without managing states)

sample: https://codesandbox.io/s/nostalgic-nobel-cby9z2?file=/src/App.js

[Jean Caiza]

Solve that problem by putting it in the correct order, but now there is another problem when I try from the "Edit" Command, sometimes it doesn't show, but when you keep trying it shows the following error. any solution? or how to do it correctly



sample: https://codesandbox.io/s/nostalgic-nobel-cby9z2?file=/src/App.js

[Pavithra Subramaniyam]

Jean,

Query#1: I see that the refreshColumn() method has visually updated the Grid, does that have any secondary effect? I mean, for example, remount the dataSource?

Yes, The “refreshColumns” will invoke the Grid refresh action. So while using the remote dataSource, the Grid will request for the data from the server.

Query#2: when I try from the "Edit" Command, sometimes it doesn't show, but when you keep trying it shows the following error. any solution?

Currently, we are working on the reported issue “Script error while dynamically setting the frozen columns”, and we will update further details as early as possible. Until then we appreciate your patience.

Regards,

Pavithra S

[Jean Caiza]

Thanks for Reply!, 

I would like to know the status of the follow-up to be able to correct it at the moment

Regards!

[Rajapandiyan Settu]

Hi Jean,

Thanks for your patience.

The Edit type command button is used to perform edit action on that row. But you want to do some custom action while clicking the Edit command button. It may affect some default operations of the Edit button. So, we suggest you to perform your custom action after some time interval.

[App.js]

  const onCommandClick = (args) => {

    const { commandColumn: { type }} = args;

    if (type === "Edit") {

      args.cancel = true;

      setTimeout(() => {

        hideColumn();

        hideToolbarItems(1, false);

        hideToolbarItems(0);

      });

    }

  };

 

Sample: https://codesandbox.io/s/recursing-jackson-eh4o23?file=/src/App.js

Regards,

Rajapandiyan S

[Jean Caiza]

Thanks for reply,

i have a question about this reply:  Yes, The “refreshColumns” will invoke the Grid refresh action. So while using the remote dataSource, the Grid will request for the data from the server.

Could this cause a performance problem? maybe there is some other solution to hide/show the frozen column more optimally?

[Rajapandiyan Settu]

Jean,

Query: Uncaught RangeError: Maximum call stack size exceeded.

We have confirmed that the reported behavior is an issue from our side and logged this as - “script error thrown when scrolling the Grid after hiding frozen column”. Thank you for taking the time to report this issue and helping us improve our product. At Syncfusion, we are committed to fixing all validated defects (subject to technical feasibility and Product Development Life Cycle ) and it will be fixed in any of our upcoming releases.

We will get back to you once the fix is rolled out. You can now track the current status of your request, review the proposed resolution timeline, and contact us for any further inquiries through the below link,

Feedback: https://www.syncfusion.com/feedback/39672/script-error-thrown-when-scrolling-the-grid-after-hiding-frozen-column

Disclaimer: Inclusion of this solution in the weekly release may change due to other factors including but not limited to QA checks and works reprioritization.

[Rajapandiyan Settu]

Jean,

Sorry for the inconvenience caused.

You are using only one frozen column in the Grid and you want to show & hide that column in Grid. To hide/show the single frozen column in the Grid, we must refresh the Grid to render it properly. Else it will raise focus issues and other issues in the Grid. So, we suggest you to use the refreshColumns method since it is mandatory to resolve the reported problem.

Regards,
Rajapandiyan S

[Jean Caiza]

Thanks for reply,

[Suganya Gopinath]

Welcome, please contact us if you need further assistance. We are glad to assist you.

[Jean Caiza]

hello!,

I have been using the solution that has been promoted for a while, but according to a certain amount of data, using refreshColumns() usually has a delay, even visually it looks quite strange, is there a solution to hide the frozen column? without using refreshColumns() ?

Greetings :)

[Rajapandiyan Settu]

Jean,

In our architecture, we have used different tables for movable and frozen columns in the Grid. If you hide all the columns in the frozen part, we have to refresh the Grid. Else it will raise focusing issues and other issues in the Grid. So, we must use refreshColumns method. This is the default behavior of EJ2 Grid.

Regards,
Rajapandiyan S