addRow method too slow on multiple row add

Question

hi, i have a problem and cant figure out o workaround. i'll be happy if anyone can help.

i have a big tree( about 2K items). i want to remove some nodes on the tree when a specific node selected. for example when i select the node which it's id is 1000, i want to remove 50 nodes (Id's : 1100 -> 1150). tree component supports this. i can remove the nodes that i wanted. no problem. but if i deselect the selected node, removed nodes must come back, i have done this via addRow method. i keep removed nodes in a list variable. when i deselect, i add all the list one by one. but this is too slow. for 50 nodes, it takes about 4 seconds. is there any other way to make faster?

here is sample:

http://jsplayground.syncfusion.com/rvrpu4lk

Jayakumar Duraisamy · Answer

Hi Ugur, 
We have analyzed your given requirement but we need some clarification while adding the removed nodes back to the TreeGrid. Whether you need to add the removed nodes back to its previous position or need to add it to top position of the TreeGrid content, also will you be removing only the child nodes always ? Can you please explain your requirement briefly so that we can suggest you an effective way to achieve it.  
Regards, 
Jayakumar D

Ugur Yilmaz · Answer

hi thank you for fast response.1)  Whether you need to add the removed nodes back to its previous position or need to add it to top position of the TreeGrid content -)  i want to add removed nodes on their previous position. 2) will you be removing only the child nodes always ? -) no. i can remove both parent nodes or child nodes. when i remove a parent nodes, children of that parent node must be removed. (by the way i did this. i checked that if removed node is a parent node, i found all of its children and remove them one by one. if the reomevd node is a child node, just remove it from the tree.)

Jayakumar Duraisamy · Answer

Hi Ugur, 
 
We suggest you to merge the removed records with existing data source and refresh the updated data source using “setModel” property instead of adding the removed records one by one.  
This will be an optimized solution and we have modified the code snippet in your given sample.  
please refer the following code snippets, 
 




rowSelected: function (args) { 
                 
                var treegridObj = $("#TreeGridContainer").data("ejTreeGrid") 
                removedConfigRecordTreeIdList = [900, 901, 902, 903, 904, 905, 906, 907, 908, 909, 
                                                 910, 911, 912, 913, 914, 915, 916, 917, 918, 919, 
                                                 920, 921, 922, 923, 924, 925, 926, 927, 928, 929, 
                                                 930, 931, 932, 933, 934, 935, 936, 937, 938, 939, 
                                                 940, 941, 942, 943, 944, 945, 946, 947, 948, 949 
                ]; 
 
                if (removedData.length != 0) { 
                    //for (var i = 0; i < removedData.length; i++) { 
                    //    treegridObj.addRow(removedData[i], ej.TreeGrid.RowPosition.Top); 
                    //} 
                    var datasource = this.dataSource(); 
                        removedData = $.merge(removedData, datasource); 
                    // Dynamically refresh the data source 
                    this.setModel({ "dataSource": removedData });   
                    removedData = []; 
                } 
                else { 
                    var currentRemovedRows = $.grep(treegridObj.model.flatRecords, function (e) { 
                        return removedConfigRecordTreeIdList.indexOf(e.taskID) != -1; 
                    }); 
                    for (var i = 0; i < currentRemovedRows.length; i++) { 
                        // Collecting item values to merge with existing data source. 
                        removedData.push(currentRemovedRows[i].item); 
                    } 
                    if (currentRemovedRows.length > 0) { 
                        deleteRows(currentRemovedRows, treegridObj); 
                    } 
                     
                } 
 
            }, 
Please find the modified sample as below, 
Sample: http://jsplayground.syncfusion.com/m0abnsmu  
Regards, 
Jayakumar D

Ugur Yilmaz · Answer

thanks for the reply, but i can not apply this solution, becuase this aproach set all new datasource. i need to keep current datasource. because i need to keep already selected nodes. you can try yourself in your sample. select a node. then select another node. removed nodes returnss, ok but all selected nodes disappear. i can not use this solution in my bussiness model. is there other way??

Jayakumar Duraisamy · Answer

Hi Ugur, 
 
We have provided the solution in previous update is the only way to effectively reduce the time delay while adding removed records. 
In this way also we can maintain existing selected nodes after refresh the data source by using work-around. 
Please let us know that whether you will get any other issues while implementing this approach other than selected nodes? It will be helpful for us to provide exact solution for your requirement. 
  
Regards, 
Jayakumar D

Ugur Yilmaz · Answer

hi Jayakumar,i am using tree component in a complex way. i can not totally know posible errors until i apply this solution. right know there is problem about selected nodes. if you tell me a workaround and, that solution does not break my bussines controls, it is done.

Jayakumar Duraisamy · Answer

Hi Ugur, 

We have prepared a sample from your given requirement. In this sample, we have modified some previous code changes like binding click event to the checkbox externally to perform operations like deletion and adding removed records instead of “rowSelected” event. We have also maintained “checkedIds” array collection which have the checked records taskId values. 
Using the client-side event “rowDataBound” which will be triggered when records gets refreshed, we have enabled the checkbox selection with “checkedIds” array to maintain selection once after refreshed the updated data source by setModel. 

Please find following sample for your reference, 
Sample: http://jsplayground.syncfusion.com/wkla1lbp  

Please let us know, whether the given work-around fulfills your requirement. otherwise, please explain you requirement in detail. It will help us to provide an exact solution. Also updating the data source while adding or deleting the records in bulk is the only way to improve the performance. 
Regards, 
Jayakumar D