Not able to bind external state varaible with their updated values during life of component in grid column template

[vamshidhar reddy rentala]

Hi,
As an example ,
I have taken a flag variable  which is Boolean am changing its state with an external button called "Change Value",
Now i am using this state variable (flag) in grid column template ,initially it is loading its(flag) value,
But changing flag value using external button, flag stage changes to true.
But it is not reflecting in column template
Please check following example.
It is stopping me from going ahead, Please suggest some solution

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

Thank you.

[Hemanthkumar S]

Hi vamshidhar,

Query: Changing flag value using external button, is not reflecting in column template

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). The react useRef Hook allows you to persist values between renders. Based on your update we prepared a sample and recommend attaching the state in the useRef Hook.

For more information, please refer to the below code example and sample.

[app.jsx]

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

 

  const [flag, setFlag] = useState(false);

  const stateRef = useRef();

  stateRef.current = {

    flag: flag,

  };

 

          <ColumnDirective

            field="ShipCountry"

            headerText="Ship Country"

            editTemplate={editTemplate}

            template={() => {

              // console.log(flag, 'flag');

              console.log(stateRef.current.flag, 'flag');

 

              // return <>Hello</>;

              return (

                <input

                  placeholder="Ship Country"

                  disabled={stateRef.current.flag}

                ></input>

              );

            }}

            width="150"

          ></ColumnDirective>

 

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

If you require further assistance, please do not hesitate to contact us. We are always here to help you.

Regards,

Hemanth Kumar S

[vamshidhar reddy rentala]

Hi,

The updated values is already available flag(state variable),i just want to use this in grid column template,
Not by creating another useRef.

is there any possible solutions for this?
Thanks for quick update.

[Hemanthkumar S]

Hi vamshidhar reddy rentala,

Currently, we are validating your query (Not able to bind external state varaible with their updated values during life of component in grid column template). We will update you with the details on or before 19th April 2023. Until then we appreciate your patience.

Regards,

Hemanth Kumar S

[Hemanthkumar S]

Hi vamshidhar,

Thanks for sharing the details.

We have confirmed that the reported behavior is an issue from our side and logged it as - “React function state variable issue with syncfusion templates”. 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 ).

You can now track the current status of your request and contact us for any further inquiries through the below link,

Feedback: https://www.syncfusion.com/feedback/43162/react-function-state-variable-issue-with-syncfusion-templates

Disclaimer: Inclusion of this solution in the weekly release may change due to other factors including but not limited to QA checks and works reprioritization.

Regards,

Hemanth Kumar S

[Hemanthkumar S]

Hi vamshidhar reddy rentala,

We are glad to announce that, we have included the fix for the issue “React function state variable issue with syncfusion templates” in our 21.2.4 release.  So please upgrade to our latest version of the Syncfusion package to resolve the reported issue.

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

Sample Link: https://stackblitz.com/edit/react-xa25ij-xgsq1r?file=package.json

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 any further assistance. 

Regards,

Hemanth Kumar S

[Chhavi]

Hi Syncfusion team,

The same issue is happening with editTemplate also, the updated state value is not reflecting in editTemplate.

[Hemanthkumar S]

Hi Chhavi,

As per current architecture, we are unable to update the state changes in edit template of Grid component using react way. We have already considered this feature (React native component support) at our end and it's available in our queue. You can track this feature status in below feedback.

Feedback: https://www.syncfusion.com/feedback/6415/react-native-component-support

Usually, Syncfusion will plan and implement the features based on feature rank, customer requested count and volume wish-list. We will implement and include this feature in any one of our upcoming releases.

Regards,

Hemanth Kumar S