1. Home
  2. Forum
  3. React - EJ 2
  4. Freezing columns in react grid causes editing to fail

Freezing columns in react grid causes editing to fail

Hello,

I have a GridComponent (v. 20.2.36).

I imported the Freeze module, injected into the GridComponent and set the frozenColumns on the component to the desired number of columns to freeze.

The UI renders as expected with the desired number of columns frozen. I click on a record and use the built-in 'Edit' button above the grid. I change a value of a cell and click 'Update'. The save persists to the database but the grid is unable to load up again, it's just blank. If I remove the frozenColumns attribute on the GridComponent, the edit/update operation works fine. This is the error that I'm getting in the console when the frozenColumns is set:

frozenColumn error.jpg

If it helps, this is how I'm defining my grid. As far as I can tell I'm not using any of the unsupported features with frozen colums (Grouping, Row Template, Detail Template, Hierarchy Grid).

gridDefinition.jpg

Looking forward to any helpful suggestions.

Thanks.

James


3 Replies 1 reply marked as answer
RR Rajapandi Ravi Syncfusion Team July 18, 2022 12:49 PM UTC

Hi James,


Greetings from Syncfusion support


We have checked your shared information and tried to reproduce your reported problem at our end, but it was unsuccessful. So, before we start providing solution on their query, we need more information for our clarification. Please share the below details that will be helpful for us to provide better solution.


1)         Share your complete Grid rendering code


2)         Share your exact requirement scenario with detailed description.


3)         Please confirm what type of Edit modes you are using in your application “Batch/Normal/Dialog”.


4)         If possible share any simple issue reproducible sample that will be helpful for us to validate.


Regards,

Rajapandi R


JA James July 25, 2022 03:15 AM UTC

Hello Rajapandi,

Thanks for your response. I was able to sort out my issue.

It was being caused by columns that were using a "template", I was calling a function in the ColumnDirective and that was the cause of the error.

e.g. <ColumnDirective .... editTemplate: {this.getEditTemplate(3)} ... />

Reworking the code to just pass in the function seemed to work:
e.g. <ColumnDirective ... editTemplate: {this.getEditTemplate} ... />


Regards,

James


Marked as answer
RR Rajapandi Ravi Syncfusion Team July 26, 2022 06:28 AM UTC

Hi James,


We are happy to hear that you have found the solution at your end.


Please get back to us if you need further assistance.


Regards,

Rajapandi R


Loader.
Up arrow icon