Grid column template renders on dev server but not in production build

I have a grid where, due to our data model, almost every column is templated. This grid renders perfectly on a dev server (`react-scripts start` with environment variables) but when built, the same grid has no contents in all templated columns.

Here's a column definition:

{
      headerText: 'Created',
      field: 'createdAt',
      allowSorting: true,
      template: ({ createdAt }: ProcessInstanceGeneral) =>
        new Date(createdAt).toLocaleString(),
    },


This template function returns a plain string. It renders fine on a dev server but does not in a production build. The function does​ still run; I've verified this with the browser debugger.


3 Replies

AR Aishwarya Rameshbabu Syncfusion Team April 5, 2024 08:39 AM UTC

Hi Duncan Gibson,


Greetings from Syncfusion support.


After reviewing your query, we could see that you are facing an issue with rendering the templates in the production build. You have mentioned that "almost every column is templated," but in the given code example, only one column is shared. Please confirm whether you are facing an issue only with the shared column.


If so, please ensure that all environment variables affecting the build process, especially those related to locale or date formatting, are consistent in both your development and production environments. Additionally, use console.log statements within the template function to check if the `createdAt` value is being parsed correctly.


If the issue pertains to all template columns, please provide the following details to help us further investigate the problem:

- Please share the column definitions of other template columns along with the template definition.

- Provide the complete Grid rendering code and specify the type of data binding used in the Grid.

- Indicate whether remote or local data is being used. If remote data is utilized, please specify the adaptor type and include the code lines defining the data manager.

- Please share the Syncfusion package version and provide a video demonstration showing the issue replication.

The above requested details will be helpful to validate further at our end and provide solution as earlier as possible.


Regards

Aishwarya R



DG Duncan Gibson April 5, 2024 03:12 PM UTC

  • This applies to all columns with a template function.
  • The data binding is through a custom DataManager built to provide interoperability with React state, including CRUD features.
  • The Syncfusion package versions are:
  •   "@syncfusion/ej2-base": "^24.2.7",
        "@syncfusion/ej2-react-grids": "24.1.47",
        "@syncfusion/ej2-react-navigations": "^24.2.8",
      "react": "17.0.2",
     "react-dom": "17.0.2",

For confidentiality reasons, I'm limited in the amount of code I can share publicly. We can switch to a private ticket or call for that if necessary.

Here's a couple of screenshots. First, with it not working on a test server (production build, not production data).


And second, on a local dev server (same data as above).

The counts (4) shown in each screenshot are a different, unrelated problem.


AR Aishwarya Rameshbabu Syncfusion Team April 12, 2024 01:35 PM UTC

Hi Duncan Gibson,


We have created a ticket under your Syncfusion account. Kindly provide the requested code details of complete Grid rendering, including template definitions for other columns. Additionally, please share the code lines defining the DataManager.

Thank you for your cooperation. We look forward to assisting you further.


Regards

Aishwarya R


Loader.
Up arrow icon