How to update child grid row data and keep expand/collapse, checkbox,...

Question

Hi Syncfusion Team,I'm using the hierarchy (2 levels) feature of GridComponent. My data source's structure: And I have a list of updated data (child level): As far as I read the documentation, Grid will be refreshed automatedly after changing dataSource, and expanded rows will be collapsed, and the checkbox will also be unchecked.I want to update the data. And keep the status of the expanded rows and the checkboxes.I tried the implementation but it didn't work as I expected.Sample: https://stackblitz.com/edit/react-ejk7mx?file=index.js,data.jsHow can I implement it?Thanks so much.

Nithya Sivaprakasam · Answer

Hi Tran,Greetings from Syncfusion support.Query: “How to update child grid row data and keep
expand/collapse, checkbox”Currently, we are validating your query and will update
further details within two business days( 19-08-2022). Until then we appreciate
your patience.Regards,Nithya Sivaprakasam.

Nithya Sivaprakasam · Answer

Hi Tran,Sorry for the inconvenience.
We are facing some complexities in preparing a sample for your query. So we
need extra time to prepare a sample to achieve your query and will update
further details on 22nd August 2022.We
appreciate your patience until then.Regards,Nithya S

Nithya Sivaprakasam · Answer

Hi Tran,Thanks for your patience.By analyzing your code example, we found that you are
trying to update the childGrid data while expanding the detail row at initial
render. You have used the dataBound event of parent Grid to update the
childGrid dataSource. This is not the right way to update the childGrid data.

We suggest you to use the detailDataBound event of Grid to update
the childGrid dataSource.
detailDataBound: https://ej2.syncfusion.com/react/documentation/api/grid/#detaildataboundupdateRow: https://ej2.syncfusion.com/react/documentation/api/grid/#updaterow

[index.js]
  
    function detailDataBound(e) {
      e.childGrid.dataSource = e.data.children;
      if (expandedRow > -1) {
        expandRows = -1;
        setTimeout(() => {
          updatedChild.forEach((item) => {
            const { EmployeeID, OrderID } = item;
            e.childGrid.updateRow(OrderID, item);
          });
        }, 200);
      }
    }

Sample: https://stackblitz.com/edit/react-ejk7mx-d3zn6x?file=index.js,data.js
If this does not meet your requirement, kindly explain your requirement in
detail with a video demo.Regards,Nithya Sivaprakasam.

KEVIN H · Answer

Great, it works as I expected. Thank you for this help. but why set timeout with a timer that is 200ms.

Nithya Sivaprakasam · Answer

Hi Hung,We are happy to hear that issue has been resolved.The setTimeout function is used to wait for the child
grid to render completely and then update the child grid.Please get back to us if you need further assistance on
this.Regards,Nithya Sivaprakasam.

KEVIN H · Answer

Oh, I have some doubts about your solution:

+ why does the timer = 200, is this a random number, or what calculation did you do to get this number?

+ if I set timeout but don't use the timer(=0) will this solution work correctly?

+ if the data is big, will timer=200ms still work correctly?

Thanks for your detailed answer.

Joseph Christ Nithin Issack · Answer

Hi Hung,  Thanks for your
update.  The setTimeout
function is used to wait for the child grid to render completely and then
update the child grid. This time may change if there large number of data as it
will take more time to complete rendering of the child grid.Regards,Joseph I.

KEVIN H · Answer

Oh, If I have 5000 records on the parent level, and each parent record has around 100 items on the child level. how much time is appropriate in this case?Thank

Nithya Sivaprakasam · Answer

Hi Hung,Thanks for contacting Syncfusion support.Based on your query, we would like to inform you about the
behavior of detailDataBound. The detailDataBound event trigger, when rendering
the child grid  So, we suggested to use setTimeout function to perform the
dynamic actions like updateRow method with some delay. This time may change if
there large number of data as it will take more time to complete rendering of
the child grid. You can adjust the delay time based on the rendering time of
the data.Regards,Nithya Sivaprakasam.

KEVIN H · Answer

Thanks for your support.

Nithya Sivaprakasam · Answer

Hi Hung,Thanks for the update.We are glad that your issue has been resolved.Please get back to us if you need further assitance on this.Regards,Nithya Sivaprakasam.