Load Child data on Parent Row Expand

Question

I have 2 APIs, first API loads just master data in parent grid. and second api loads data based on parentId which is my querystring. I would like to call second API and load the child data when user expands parent row. all example i see loads everything in one go and then expands and collapse data.

Also, I would like the ability to add/edit/delete rows both in parent and child grid.

Please refere to this link https://stackblitz.com/edit/angular-f151306-kbylma?file=app.component.ts

I have tried using expand event but it does not help and also tried click event.

Rajapandi Ravi · Accepted Answer

Hi PDev, 

Greetings from Syncfusion support 

We have analyzed your query and we could see that you like to use datamanager to fetch the record for childGrid while expanding a row and perform CRUD operation. Based on your query we have prepared a sample and we suggest you follow the below way to achieve your requirement. 





 
public childGrid: any = { 
        queryString: 'OrderID', 
        toolbar: ['Add', 'Edit', 'Delete', 'Update', 'Cancel'], 
        editSettings: { allowEditing: true, allowAdding: true, allowDeleting: true }, 
        columns: [ 
            { field: 'OrderID', headerText: 'Order ID', textAlign: 'Right', width: 120 }, 
            { field: 'FirstName', headerText: 'FirstName', width: 150 }, 
            { field: 'LastName', headerText: 'LastName', width: 150 } 
        ] 
    }; 
    detailDataBound(args: any) { 
        let childdata: any = new DataManager({ 
            url: "/Home/EmpData", 
            adaptor: new UrlAdaptor() 
        }); 
        args.detailElement.querySelector('div').ej2_instances[0].dataSource = childdata; //set the childGrid data here 
    } 
    ngOnInit(): void { 
        this.data = new DataManager({ 
            url: 'Home/UrlDatasource', 
            updateUrl: 'Home/Update', 
            insertUrl: 'Home/Insert', 
            removeUrl: 'Home/Delete', 
            adaptor: new UrlAdaptor 
        }); 
        this.pageSettings = { pageSize: 100 }; 
        this.editSettings = { allowEditing: true, allowAdding: true, allowDeleting: true, mode: 'Normal' }; 
        this.toolbar = ['Add', 'Edit', 'Delete', 'Update', 'Cancel']; 
    } 
 
Sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/1703111020129905.zip 

Documentation: https://ej2.syncfusion.com/angular/documentation/grid/hierarchy-grid/#adding-record-in-childgrid 

Regards, 
Rajapandi R