enableVirtualization = true problem

Question

hi, i am using treeGrid component. i set the 'enableVirtualization' parameter to 'true'. set a list of 2100 item as dataSource. (enableCollapseAll = true) when i check the grid form console, i see treeGridObj.model.flatRecords.length = 2100 (which is correct) but i see treeGridObj.model.updatedRecords.length = 1 (which is expanded row count) updatedRecords list does not contains collapsed state rows. why is that? is there any other way to use both enableVirtualization = true and updated records hold all rows.

as you can see in sample project, when all tree expanded, i select correct record as selected index (2,4,6,7,8) but when it collapsed it selectes wrong records, because updatedRecords does not hold all records.

sample:

http://jsplayground.syncfusion.com/ecokqsgy

Suriyaprasanth Ravikumar · Answer

Hi Ugur, 
 
We have analyzed your reported issue and it’s the behavior of TreeGrid with Virtualization mode enabled. In order to improve performance the collapsed records will not get rendered in DOM. And the updatedRecords collection will contain only the records that rendered in DOM. Rendering 2100 records in TreeGrid does not affect the performance as much, so can you render the component with virtualization mode disabledPlease disable the virtualization mode in order to achieve your requirement. 
 
If you want to achieve this in presence of Virtualization mode, then we have prepared a simple workaround sample by adding the checked status class to the checkbox element and also update the “checkboxState” value to the corresponding records in “queryCellInfo” event. 
But we could not maintain the selection hierarchy behavior without any user interaction but we can update parent record checkbox state if we have value in data source. 
Please refer the code snippet below. 




[HTML] 
var sampleData1 = [ 
     { 
         taskID: 1, ...   ,checkState: false, 
         subtasks: [ 
             { taskID: 2, ... ,checkState: true }, 
           //..   
         ] 
     }]; 
$(function () { 
    $("#TreeGridContainer").ejTreeGrid({ 
        dataSource: sampleData1, 
        //.. 
       queryCellInfo: function(args){ 
           var checkboxElement = $(args.cellElement).find(".e-checkbox"); 
            if(args.column.field == 'taskName' && args.data.checkState && !checkboxElement.hasClass("e-checkmark")){ 
                checkboxElement.addClass("e-checkmark"); 
                args.data.checkboxState = "checked";            } 
        }, 
    });           
}); 

Please find the sample link below. 
Link: http://jsplayground.syncfusion.com/5ren5a53 
 
Please let us know if you need any other assistance on this.  
 
Thanks,  
Suriyaprasanth R.

Ugur Yilmaz · Answer

hi, the soloution you provided is not suitable for me. i need updated records full everytime with enableVirturalization.

you said rendering 2100 records does not affect performans so much, but when i set a 2100 length datasource, the treegrid becomes unusuable. when i scroll down, tree responds 1-2 seconds later. you can try yourself.

there is one more situation about virtualization. if i bound a 2000+ datasource, and expand all nodes, the tree.model.updateRecords has all items. and tree is very fast. but if i set virtualiztion false and bound 2000+ datasource to the treegrid, it is very slow. i checked the DOM, both is the same, so what is the difference? is it the only way to have updateReocrds list hass all elements, set enableVirtualiztion to false?.

Suriyaprasanth Ravikumar · Answer

Hi Ugur, 
We have achieved your requirement using a different work around, because when virtualization mode is enabled only the expanded records will be rendered in DOM and the collapsed records will not be available in DOM.  And hence we will push only the records available in DOM to the updateRecords collection, we will also use this collection internally for multiple calculations in virtualization mode, so it is necessary to maintain the available elements in DOM.  
As per your requirement we have prepared a simple workaround sample by “selectRows” method and “create” client side event, from this workaround you can able to check the selection checkbox of any records in collapse/expanded state initially with Virtualization mode enabled. This would also maintain the selection hierarchy behavior, Which fulfills your exact requirement. 
 
Please find the modified sample from the below location. 
Location: http://www.syncfusion.com/downloads/support/directtrac/general/ze/Treegrid_checkbox-1554914678 
Please let us know if you need any other assistance on this.  
 
Thanks,  
Suriyaprasanth R.

Ugur Yilmaz · Answer

hi, thats ok for selecting tree on initialization. i used anotherway by the way, first expand all nodes. then select corresponding nodes and collapse all again. but this does not solve my real problem. my real problem is, manupilating tree data source on selection. for exapample, if you select the node A.1.1, i want want to remove the Node C.1.3. and D.1.4.2 etc.. treegrid has a method to remove the corresponging rows. "_removeRecords". i found it in the soruce code by the way. there is no documentaiton. i can remove the rows that i want. the problem is, if the node that i want to remove is collapsed state when virtulization on, there is no way i can remove it. because it is not in updatedRecords list. i can find that row in flatRecords list but i cant use index of it. because remove rows method want index of updatedRecords list.

Suriyaprasanth Ravikumar · Answer

Hi Ugur,  
 
In your previous updates and provided samples, your requirement was to select the checkbox of the collapse records in virtualization enabled mode and so we have provided the sample to achieve that requirement alone. Now from your last update we become aware of your requirement to delete some collapsed records while selecting its parent/any record.  
 
For providing the exact sample for your requirement, still we need clarifications for the below queries, 

Do you want to select the records for the purpose of deleting those at initial load ?
Or do you want to delete the records at run time after selecting the records ?
In your previous update you have said that you want to delete the records on selecting another record, is that a parent record you want to select and child records you want to delete ?
 
Please revert us your exact requirement with proper step by step details, this would help us to provide a better solution. 
And also the method “_removeRecords” you noted in your query is an internal method and this is not a proper method to remove the records. In TreeGrid we have “deleteRow” public method to perform delete actions.  
 
Please let us know if you require further assistance on this. 
 
Thanks,  
Suriyaprasanth R.