1. Home
  2. Forum
  3. React - EJ 2
  4. Inside syncfusion template I need updated state value

Inside syncfusion template I need updated state value

Hi, Here I need updated state value inside the grid template, after clicking edit button. But I am getting initial value always.



11 Replies
RS Rajapandiyan Settu Syncfusion Team March 28, 2022 12:50 PM UTC

Hi RamyaShree, 

Thanks for contacting Syncfusion support. 

We can reproduce the reported behavior with the given code example at our end. In which we are unable to get the updated state variable value inside the editTemplate function. 

We suggest you to bind the columns in below way, so that the Grid will be refreshed properly when state variable changes. 


const SyncGrid = () => { 
  const [isEditS, setIsEditS] = useState(true); 
  const editClick = (args) => { 
    setIsEditS(!isEditS); 
  }; 
  const editTemplate = (args) => { 
    console.log(isEditS); 
    return <input id="ShipCountry" name="ShipCountry" />; 
  }; 
  const columns = [ // generate the Grid columns 
    { 
      field: 'OrderID', 
      headerText: 'Order ID', 
      width: '120', 
      textAlign: 'Right', 
      isPrimaryKey: true, 
    }, 
    { 
      field: 'ShipCountry', 
      headerText: 'Ship Country', 
      width: '150', 
      editType: 'dropdownedit', 
      editTemplate: editTemplate, 
    }, 
  ]; 
  return ( 
    <div> 
      <GridComponent 
        ref={(g) => (grid = g)} 
        dataSource={data} 
        pageSettings={pageSettings} 
        toolbar={toolbarOptions} 
        allowPaging={true} 
        editSettings={editSettings} 
        cellEdit={cellEdit.bind(this)} 
        columns={columns}  // bind the columns 
      > 
        <Inject services={[Page, Toolbar, Edit]} /> 
      </GridComponent> 
    </div> 
  ); 
}; 



Please get back to us if you need further assistance with this. 

Regards, 
Rajapandiyan S 


DE Deniz May 16, 2022 02:24 PM UTC

Hi,

Is there any improvement in accessing the latest React state when using ColumnDirective? Do we still need to switch to a column array way of defining columns instead of ColumnDirective when accessing React state? 


RS Rajapandiyan Settu Syncfusion Team May 17, 2022 01:43 PM UTC

Hi Deniz,


Thanks for contacting Syncfusion support.


Currently, we are checking your query (“Is there any improvement in accessing the latest React state when using ColumnDirective”) with our team. We will update the further details on May 19th, 2022.


We appreciate your patience until then.


Regards,

Rajapandiyan S


RS Rajapandiyan Settu Syncfusion Team May 19, 2022 02:05 PM UTC

Hi Deniz,


We have forwarded the reported query (“Is there any improvement in accessing the latest React state when using ColumnDirective”) to the concerned team and they are validating it with high priority. We will update the further details on or before May 24th, 2022.


We appreciate your patience until then.


Regards,

Rajapandiyan S


RS Rajapandiyan Settu Syncfusion Team May 24, 2022 11:40 AM UTC

Hi Deniz,


Thanks for your patience.


We have confirmed that the reported behavior is an issue from our side and logged a bug for the same as “State variables are not updating properly while using template in Grid component”. 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 will include the defect fix in our Volume 2 2022 Main Release which is expected to be rolled out at the end of June 2022.


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/35115/state-variables-are-not-updating-properly-while-using-template-in-grid-component


Regards, 

Rajapandiyan S 


RS Rajapandiyan Settu Syncfusion Team July 5, 2022 05:28 AM UTC

Hi Deniz,


We deeply regret the inconvenience caused.


Due to the complexity of the issue (“State variables are not updating properly while using template in Grid component”) we are unable to complete it as planned. Currently, we are working on this with high priority and will include the fix in Volume 2 SP which is expected to be rolled out in the month of August 2022.


We appreciate your patience until then.


Regards,

Rajapandiyan S


RS Rajapandiyan Settu Syncfusion Team July 22, 2022 05:39 PM UTC

Hi Deniz,


Thanks for your patience.


We are glad to announce that our Essential Javascript2 patch release (v20.2.39) has been rolled out successfully and in that release, we have added the fix of “State variables are not updating properly while using template in Grid component” issue. So, please update your Syncfusion packages to the current version and use latest style script to get this.


Release Notes: https://ej2.syncfusion.com/react/documentation/release-notes/20.2.39/?type=all#grid


Find the below sample for your reference.


Sample: https://stackblitz.com/edit/react-xa25ij-pkq2g1?file=package.json,component%2Fapp.jsx


We thank you for your support and appreciate your patience in waiting for this release. Please get in touch with us if you would require further assistance.


Regards,

Rajapandiyan S


BP Bernd Parchmann January 19, 2023 12:34 PM UTC

Hello,

I have a similar problem...

In my GridComponent I have a template column. This column contains an icon which is disabled if a state is not set (-> item selected in a treegrid)

The problem is, that in the "template function" the state is always undefined but the state is set in the selectRow event and the value is available in the useEffect hook...


If I am using your suggenstion it is working (column variable). But shouldn't it be working with ColumnDirective?


Maybe someone has a hint


Attachment: TaskConfiguration_8d4711ad.zip


RS Rajapandiyan Settu Syncfusion Team January 19, 2023 01:12 PM UTC

Hi Bernd,


Thanks for contacting Syncfusion support.


We suggest you to define the state variable (getTask) in the useRef to get the updated state value inside the columnTemplate function. Please find the below code example and sample for your reference.

 

[app.jsx]

import React, { useRef, useState, useCallback } from 'react';

 

  const [getTask, setTask] = useState();

  const stateRef = useRef();

  stateRef.current = {

    data: data,

    task: getTask,

  };

 

  function changeTask(val) {

    if (!getTask) {

      setTask('red');

    } else {

      setTask();

    }

    console.log(getTask);

  }

 

  const aswcTemplateColumn = useCallback(

    (props) => {

      var swc = props;

      if (stateRef.current.task != undefined) {

        return (

          <i

            className="fa fa-car"

            style={{ fontSize: '30px', color: 'red' }}

          ></i>

        );

      } else {

        return <i className="fa fa-car" style={{ fontSize: '30px' }}></i>;

      }

    },

    [getTask]

  );

 


Sample: https://stackblitz.com/edit/react-xa25ij-wkdsky?file=component%2Fapp.jsx

Regards,

Rajapandiyan S


April 22, 2024 03:23 PM UTC

Has this improved? The above solution is pretty awkward.


AR Aishwarya Rameshbabu Syncfusion Team April 29, 2024 12:15 PM UTC

Hi,


We have made improvements in our latest package version. So, we kindly recommend updating to the most recent version of the Syncfusion package in order to resolve the issue encountered when utilizing react state variables in column template functions. Please refer to the sample where the templates are rendered based on a react state variable.

Sample: https://stackblitz.com/edit/react-xa25ij-5j6zwb?file=component%2Fapp.jsx,package.json



Regards

Aishwarya R


Loader.
Up arrow icon