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

grid instance

Hi,

I have a datagrid using datamanager to render order data.


const dataManager = new DataManager({

      adaptor: new UrlAdaptor(),

      updateUrl:

         process.env.REACT_APP_API_SERVER +

         `/api/order/daily?store_id=${userInfo.storeId}&date=${moment(

            date

         ).format('YYYY-MM-DD')}`,

      url:

         process.env.REACT_APP_API_SERVER +

         `/api/order/daily?store_id=${userInfo.storeId}&date=${moment(

            date

         ).format('YYYY-MM-DD')}`,

   });

When user change the date for the order, the datagrid shows the order data for that date.


However, when user change the date, the grid ref is changed to null.


<GridComponent

               id='bill'

               dataSource={dataManager}

               editSettings={editSettings}

               ref={(g) => {

                  console.log(g);

                  setGridInstance(g);

               }}

            >

It seems that if the datamanager changes the data, ref stops working. How could I access the grid instance?


Thanks,




2 Replies

FS Farveen Sulthana Thameeztheen Basha Syncfusion Team November 16, 2022 09:51 AM


Hi Tingting,


We are working on this reported problem with high Priority and provide you further details by tomorrow(17th November 2022). Until then we appreciate your patience.


Regards,
Farveen sulthana T



PS Pavithra Subramaniyam Syncfusion Team November 17, 2022 05:10 AM

Hi Tingting,


Thanks for your patience.


From your code we could see that you are setting the grid instance using the “useState”. Instead of that we suggest setting the instance as in the below code which will not be null while changing any value. Please refer to the below code example and sample link for more information.


<GridComponent

          id="Grid"

          dataSource={data}

          ref={(grid) => (gridInstance = grid)}

          allowPaging={true}

          pageSettings={{ pageCount: 3 }}

        >


https://stackblitz.com/edit/react-y33lee?file=ind


Or if you are still facing the issue, please share the below details that will be helpful for us to provide a better solution as early as possible.


  1. Share an issue reproducible sample
  2. Why do you want to set the Grid instance using useState?


Regards,

Pavithra S


Loader.
Live Chat Icon For mobile
Up arrow icon