How to load records in TreeGrid on demand without using data manager

In TreeGrid, you can load the child records of a collapsed parent record on demand with expander click action.

Initially all the parent records can be displayed in a collapsed state by using the enableCollapseAll property. Later, if the user wants to expand a parent record on the expander click action, its child records can be fetched from the data source and can be displayed.

It is also possible to load the records on demand on page switch action with paging enabled in Treegrid. With pager click action, the parent records can be fetched and can rendered in collapsed state.

The following code example and the screenshot explains the above described behavior.

export class AppComponent { 
    constructor() { 
        this.treeData =window["projectData"].slice(0,6);         
    }; 
    ngAfterContentInit() { 
        $('#pager').ejPager({ 
            pageSize: 6,             
            totalRecordsCount: window["projectData"].length, 
            pageCount: 5, 
            click: function (args) {                 
                var treeObj = $("#TreeGridControl").ejTreeGrid("instance"); 
                var prevRec = (args.currentPage - 1) * 6;                
                treeObj.setModel({ "dataSource": window["projectData"].slice(prevRec, prevRec + 6) }); 
            }, 
        }); 
    } 
} 

Parent records displayed in collapsed state in TreeGrid

You can find a working treegrid sample, for loading the expanded child records on demand without data manager here.