We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date
close icon

Column Directive template dissappears after click or state change etc.

Hi, @Syncfusion. This is my package with versioning 

So the reason that I'm writing is that when I click on icon(item) inside column where are some icons with methods rendered through template method inside Column Directive from '@syncfusion/ej2-react-grids'; it opens dialog but afterwards those icons disappear and somehow the css is also changed for the grid. I don't understand what is the reason above this and why template disappears, it was working just fine on "^19.3.44", but I had to move forward. Please assist and if you need some additional information please let me know. Here is my code:

6 Replies 1 reply marked as answer

JC Joseph Christ Nithin Issack Syncfusion Team January 11, 2023 11:49 PM UTC

Hi Alexei,

Greetings from Syncfusion support.

Thank you for reaching out to us with your inquiry. We understand that you need assistance in resolving an issue you are facing with our grid. In order to provide an accurate and effective solution, we kindly ask that you provide us with the following information:

  • Ensure if you have provided the correct version when refering the css in the index.html file.

  • A Simple sample that demonstrates the issue you are experiencing.

  • A video demo of the issue.

This will enable us to fully understand the problem and provide you with the best possible solution. We apologize for any inconvenience this may cause and we are here to assist you every step of the way. Please let us know if there is anything else we can do to help.


Joseph I.

OV Oleksandr Vitkovskyi January 19, 2023 03:15 AM UTC

Hi Syncfusion team.

I met the same issue with 

"@syncfusion/ej2-react-grids": "20.4.43"

Here is the example: https://stackblitz.com/edit/react-fpb5r5?file=index.js

Try to click "Open Modal" button.

You will see columns has template disappear.



Marked as answer

AC Alexei Ceaicovschii replied to Oleksandr Vitkovskyi January 19, 2023 06:42 AM UTC

I found a workaround for this, just using rowTemplate for Grid Component, and passing down whole grid template defined by me. But it's still unclear why it doesn't work as before, using Column Directive. I would like to fix that because it's uncomfortable to write whole grid template and css to it! 

JC Joseph Christ Nithin Issack Syncfusion Team January 23, 2023 08:37 AM UTC


  Greetings from Syncfusion support.

On inspecting the sample provided, we could see that you are having column templates which are losing their content when any state change occurs. While changing state variable due to refresh the templates are getting empty. To prevent the refresh for template columns, we need to use statelessTemplates while updating state value with template feature enabled in grid component. Also, we would like to inform you that, we provided the support for this since Vol 4 release. So please update your Syncfusion packages to the latest version and resolve the problem.

Refer the below code example:









Sample: https://stackblitz.com/edit/react-1xewxm-twppqu?file=index.js

KT Kim Thái replied to Joseph Christ Nithin Issack May 8, 2024 04:36 AM UTC

i get same error when i use Gantt syncfusion control platform React. can you help me fix it.Image_8516_1715143052404

AG Ajithkumar Gopalakrishnan Syncfusion Team May 10, 2024 12:22 PM UTC

Hi Kim Thai,

We have tried to replicate the issue based on the information, but we are unable to replicate the issue on our end. We have attached a video reference; please refer to it.

Video reference: https://www.syncfusion.com/downloads/support/directtrac/general/ze/Media3-1795562400.zip

Sample link: https://stackblitz.com/edit/react-1xewxm-hws6cn?file=index.js,index.html

We request you to share more information to achieve your requirement. Kindly share the details below.

  • Please provide a detailed explanation of your requirement.
  • Complete code of Gantt chart with package version.
  • Have you faced the issue on any specific scenario or enabling specific properties.
  • Video demo to replicate the issue(with replication steps).
  • If possible, replicate the issue in a shared sample and revert back to us.

Once we receive this information, we will be better equipped to identify the root cause of the issue and provide you with the necessary assistance.

Ajithkumar G

Live Chat Icon For mobile
Up arrow icon