TreeGrid refresh not working if a row is selected

[Developer]

Hello!

Refresh is not working if a row is selected in the treegrid! 

Script error occurs:

ej.web.all.min.js:10 Uncaught RangeError: Maximum call stack size exceeded

    at Arguments.slice (<anonymous>)

    at t.copyObject (VM1820 ej.web.all.min.js:10)

    at t.copyObject (VM1820 ej.web.all.min.js:10)

    at t.copyObject (VM1820 ej.web.all.min.js:10)

     ....

I have used a simple sample from your homepage. See attachment.

Regards 

Michael

Attachment: TreeGridRefresh_36a200a0.zip

[Jonesherine Stephen]

Hi Michael, 

Thanks for contacting Syncfusion support. 

We have analyzed the reported issue. We can refresh the TreeGrid datasource by using “setModel” support. 

Please find the code example below 

function clickme() { 

    var treeObj = $("#TreeGridContainer").data("ejTreeGrid"); 

   //To refresh TreeGrid with new datasource 

    treeObj.setModel({“dataSource": refreshedData}); 

} 

We have also modified the provided sample for your reference. Please find the sample from below location 

Sample: http://jsplayground.syncfusion.com/Sync_l4jkbwvq 

Kindly share us your exact requirement regarding TreeGrid refresh on row selection. This would be helpful for us to serve you better. 

Regards, 

Jone sherine P S 

[Developer]

Thank you, that is working for me.

I have another question to the refresh behavior.

I have attached a sample (like your sample and added toolbar support).

If i select one row (e.g. a row of the first group) the delete symbol is available in the toolbar.

Now if i refresh the treegrid, the selection is also at the correct position but the delete symbol in the toolbar is not active. 

I have to reselect the row.

1) Is there a possibility that the toolbar have the correct state for the actual selection?

2) Is there a possibility that settings like expand/collapse will be set to the state that was before the refresh?

Regards

Michael

Attachment: TreeGridRefresh_cd5c9b46.zip

[Punniyamoorthi Elangovan]

Hi Michael,  

Please find the below updates. 

Query1: Is there a possibility that the toolbar has the correct state for the actual selection? 

Answer: We have achieved this requirement by using setModel support with some workaround solution. Please refer the below code example for this 

<button onclick="clickme()" style="margin-bottom:10px">Refresh TreeGrid</button> 

<script type="text/javascript"> 

     function clickme() { 

            var treeObj = $("#TreeGridContainer").data("ejTreeGrid"); 

            //To refresh TreeGrid with new datasource 

            treeObj.setModel({ "dataSource": refreshedData }); 

            var indexValue = treeObj.model.selectedRowIndex; 

            treeObj.model.selectedRowIndex = -1; 

            treeObj.setModel({ "selectedRowIndex": indexValue }); 

            } 

    </script> 

  

Query2: Is there a possibility that settings like expand/collapse will be set to the state that was before the refresh? 

Answer:  

In TreeGrid, we can maintain the expand state of the records by using expandStateMapping property. Please refer the below code snippet 

<script type="text/javascript">  

    refreshedData = [{ 

              taskID: 1, 

              taskName: "Planning", 

              isExpanded:false, 

              //..                   

          }, 

          { 

              taskID: 6, 

              taskName: "Parent Task 2", 

              isExpanded: true, 

              //.. 

          }]; 

 

$(function () { 

            $("#TreeGridContainer").ejTreeGrid({ 

                        dataSource: projectData, 

                         expandStateMapping: "isExpanded", 

                                 //.. 

             }) 

   }); 

</script> 

We have prepared the sample for above two queries, please find the sample from below link 

Link: http://jsplayground.syncfusion.com/eozyvtyw 

Regards, 

Punniyamoorthi