Treegrid with remote data does not persist expand state after refresh

[echoweb]

I tried the expandStateMapping but it does not work with remote self referential data.

The expanded state is not working with remote data, I also tried expanding the rows manually on databound event and then the child rows is duplicated on the root node. 

Can you please provide a sample to maintain expanded state with remote data.

var data = new ej.data.DataManager({

    url: 'tasks_data',

    adaptor: new ej.data.UrlAdaptor(),

    crossDomain: true 

});

//{ text: 'Completed', tooltipText: 'Completed', prefixIcon: 'far fa-check-square', id: 'viewCompleted' },

var treeGridObj = new ej.treegrid.TreeGrid({

        dataSource: data,

        idMapping: 'id',

        hasChildMapping: 'is_parent',

        parentIdMapping: 'parent_id',

        expandStateMapping: 'is_expanded',

        treeColumnIndex: 0,

        editSettings: { allowEditing: true, allowAdding: true, allowDeleting: true, mode: 'Cell', newRowPosition: 'Below' },

        allowRowDragAndDrop: true,

        actionBegin: actionBegin,

        actionComplete: actionComplete,

        rowDrop: rowDrop,

        toolbarClick: toolbarClickHandler,

        queryCellInfo: queryCellInfoHandler,

        collapsed: collapsedHandler,

        expanded: expandedHandler,

        dataBound: dataBoundHandler,

        load: loadHandler,

        cellEdit: cellEdit,

        toolbar: [{ text: 'Refresh', tooltipText: 'Refresh', prefixIcon: 'fas fa-sync-alt', id: 'Refresh' }, 'Add', 'Delete', 'Update', 'Cancel','ExpandAll', 'CollapseAll', 'Search'],

        columns: [

            { 

                field: 'title', headerText: 'Task Name', editType: 'stringedit', width: 240, 

                validationRules: {required: true} 

            },

            { 

                field: 'target', headerText: 'Target/Status', editType: 'stringedit', width: 160, 

                validationRules: {required: false} 

            },

            

            {

                field: 'completed', headerText: 'Completed', width: 60, editType: 'booleanedit', textAlign: 'Right' ,

                type: 'boolean', displayAsCheckBox: true

            },

            { 

                field: 'role', headerText: 'Role', editType: 'dropdownedit', width: 80, 

                validationRules: {required: true}, edit: { params: {query: new ej.data.Query(),dataSource: rolesDatasource, popupHeight: '200px', floatLabelType: 'Always', placeholder: 'Role' }},

            },

            

        ]

    });

    treeGridObj.appendTo('#TreeGrid');

[Pon Selva Jeganathan]

Hi echoweb,  

 

Thanks for contacting syncfusion forum. 

Query: Treegrid with remote data does not persist expand state after refresh

Based on your query, we understood that you need to render parent records with expanded state while using UrlDataSource. While using remoteData to TreeGrid, by default TreeGrid parent rows has been rendered with collapsed state. In order to expand all the rows on Load, we suggest you to use the “LoadChildOnDemand” property. If LoadChildOnDemand is enabled, parent records are render in expanded state. Here, we need to collect the “Child” records from server end along with setting “LoadChildOnDemand” property to true.  

 

Please check the below code snippet, 

 

<h2>RemoteData</h2> 

<div id="TreeGrid"></div> 

 

<script> 

    let data = new ej.data.DataManager({ 

        url: "/Home/DataSource", 

        ….. 

        adaptor: new ej.data.UrlAdaptor() 

    }); 

 

    let treeGridObj = new ej.treegrid.TreeGrid({ 

        dataSource: data, 

        ….., 

        loadChildOnDemand: true, 

 

        toolbar: ['Add', 'Edit', 'Delete', 'Update', 'Cancel'], 

        ……. 

</script> 

 

 

public IActionResult DataSource([FromBody] DataManagerRequest dm) 

        { 

            IEnumerable DataSource = TreeData.GetSelfData(); 

            …. 

            var count = TreeData.GetSelfData().Count(); 

            if (dm.Skip != 0) 

            { 

                DataSource = operation.PerformSkip(DataSource, dm.Skip);   //Paging 

            } 

            if (dm.Take != 0) 

            { 

                DataSource = operation.PerformTake(DataSource, dm.Take); 

            } 

            if (dm.Where != null) 

            { 

                DataSource = CollectChildRecords(DataSource, dm);   // method to collect child record  

            } 

 

            return dm.RequiresCounts ? Json(new { result = DataSource, count = count }) : Json(DataSource); 

 

        } 

        public IEnumerable CollectChildRecords(IEnumerable datasource, DataManagerRequest dm) 

        { 

            DataOperations operation = new DataOperations(); 

            IEnumerable DataSource = TreeData.GetSelfData();   // use the total DataSource here   

            string IdMapping = "TaskId";// define your IdMapping field name here   

            int[] Ids = new int[0]; 

            foreach (var rec in datasource) 

            { 

                int ID = (int)rec.GetType().GetProperty(IdMapping).GetValue(rec); 

                Ids = Ids.Concat(new int[] { ID }).ToArray(); 

            } 

            IEnumerable ChildRecords = null; 

            foreach (int id in Ids) 

            { 

                dm.Where[0].value = id; 

                IEnumerable records = operation.PerformFiltering(DataSource, dm.Where, dm.Where[0].Operator); 

                ChildRecords = ChildRecords == null || (ChildRecords.AsQueryable().Count() == 0) ? records : 

                 ((IEnumerable<object>)ChildRecords).Concat((IEnumerable<object>)records); 

            } 

            if (ChildRecords != null) 

            { 

                ChildRecords = CollectChildRecords(ChildRecords, dm); 

                if (dm.Sorted != null && dm.Sorted.Count > 0) 

                { 

                    ChildRecords = operation.PerformSorting(ChildRecords, dm.Sorted); 

                } 

                datasource = ((IEnumerable<object>)datasource).Concat((IEnumerable<object>)ChildRecords); 

            } 

            return datasource; 

        } 

         

Please refer to the below sample: 

https://www.syncfusion.com/downloads/support/forum/160169/ze/coresample494066256 

Please refer to the below API documentation: 

https://ej2.syncfusion.com/javascript/documentation/api/treegrid#loadchildondemand 

 

Kindly get back to us for further assistance. 

Regards, 

Pon selva