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

Template fields are getting empty whenever state changes

Hello, I've a very basit DataGrid with local data which has a template column like this:

Capture.JPG

If I make any state update then the template column values are getting empty like this:

Capture.JPG

Codes are here:

import React, { useState } from "react";
import {
  ColumnDirective,
  ColumnsDirective,
  GridComponent,
} from "@syncfusion/ej2-react-grids";
import "./App.css";
import { ExcelExport, Inject, Toolbar } from "@syncfusion/ej2-react-grids";

const DataGrid = (props) => {
  const data = [
    {
      OrderID: 10248,
      CustomerID: "VINET",
      EmployeeID: 5,
      OrderDate: new Date(8364186e5),
      ShipName: "Filiz Sarı Çelebi",
      ShipCity: "Reims",
      ShipAddress: "59 rue de l Abbaye",
      ShipRegion: "CJ",
      ShipPostalCode: "51100",
      ShipCountry: "France",
      Freight: 32.38,
      Verified: !0,
    },
    {
      OrderID: 10249,
      CustomerID: "TOMSP",
      EmployeeID: 6,
      OrderDate: new Date(836505e6),
      ShipName: "Emrah Çelebi",
      ShipCity: "İzmir",
      ShipAddress: "Luisenstr. 48",
      ShipRegion: "CJ",
      ShipPostalCode: "44087",
      ShipCountry: "Germany",
      Freight: 11.61,
      Verified: !1,
    },
    {
      OrderID: 10250,
      CustomerID: "HANAR",
      EmployeeID: 4,
      OrderDate: new Date(8367642e5),
      ShipName: "Hanari Carnes",
      ShipCity: "Rio de Janeiro",
      ShipAddress: "Rua do Paço, 67",
      ShipRegion: "RJ",
      ShipPostalCode: "05454-876",
      ShipCountry: "Brazil",
      Freight: 65.83,
      Verified: !0,
    },
  ];
  const [counter, setCounter] = useState(0);

  const template = () => {
    return (
      <div>
        <input type="button" value="test" />
      </div>
    );
  };

  return (
    <>
      <GridComponent id="grid" dataSource={data} height={150}>
        <Inject services={[Toolbar, ExcelExport]} />
        <ColumnsDirective>
          <ColumnDirective field="OrderID" width="100" textAlign="Right" />
          <ColumnDirective field="ShipCity" width="100" />
          <ColumnDirective field="EmployeeID" width="100" textAlign="Right" />
          <ColumnDirective
            field="Freight"
            width="100"
            format="C2"
            textAlign="Right"
          />
          <ColumnDirective field="ShipName" width="100" template={template} />
        </ColumnsDirective>
      </GridComponent>
      <div style={{ width: "100%", textAlign: "center" }}>
        Counter:{counter}
        <input
          type="button"
          onClick={() => setCounter(counter + 1)}
          value="+"
        />
      </div>
    </>
  );
};

export default DataGrid;

Any ideas?


1 Reply

RS Rajapandiyan Settu Syncfusion Team January 13, 2023 06:19 AM UTC

Hi Emrah,


Thanks for contacting Syncfusion support.

By default, when changing the state value, the react component automatically gets refreshed and this is the default behavior. When clicking the button, you are changing the state value and it refreshes the react component (template function).


We suggest you to define the columnTemplate function with useCallback hook to resolve this problem.


https://www.geeksforgeeks.org/react-js-usecallback-hook/

 

[index.js]

import { useEffect, useState, useCallback } from 'react';

 

  const template = useCallback(() => {

    //console.log(args, "Args");

    return <div> template text</div>;

  }, []);

 


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

Regards,

Rajapandiyan S


Loader.
Live Chat Icon For mobile
Up arrow icon