Is there a way to edit the child elements values in the grid ?

[Vigneswaran]

Hello,

I would like to know if there is a provision to edit the child values in a hierarchical grid. If so could you provide me with an example?

Warm Regards

Vigneswaran

[Rajapandi Ravi]

Hi Vigneswaran, 

Greetings from syncfusion support 

We have analyzed your query and we could see that you like to perform the Edit operation in child Grid. Based on your query we have prepared a sample and we suggest you to use the below way to achieve your requirement. Please refer the below code example, sample and documentation for more information. 

 

export class AppComponent { 

    public parentData: Object[]; 

    public childGrid: any; 

    public editSettings: EditSettingsModel; 

    public toolbar: ToolbarItems[]; 

    public selectionOptions: SelectionSettingsModel; 

    ngOnInit(): void { 

        this.childGrid = { 

            dataSource: orderDatas, 

            id: 'DestGrid', 

            queryString: 'EmployeeID', 

          allowPaging: true, 

          selectionSettings: { type: 'Multiple' }, 

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

         actionBegin(args: any) { 

        if (args.requestType === "add") { 

          // `parentKeyFieldValue` refers to the queryString field value of the parent record. 

          const EmployeeID = "EmployeeID"; 

          (args.data as object)[ EmployeeID] = this.parentDetails.parentKeyFieldValue; 

        } 

      }, 

            editSettings: { allowEditing: true, allowAdding: true, allowDeleting: true, mode: 'Normal' }, 

            pageSettings: {pageSize: 6, pageCount: 5}, 

            columns: [ 

                { field: 'OrderID', headerText: 'Order ID', isPrimaryKey: true, textAlign: 'Right', width: 120 }, 

                { field: 'ShipCity', headerText: 'Ship City', width: 120 }, 

                { field: 'Freight', headerText: 'Freight', width: 120 }, 

                { field: 'ShipName', headerText: 'Ship Name', width: 150 } 

            ] 

        }; 

    } 

} 

Sample: https://stackblitz.com/edit/angular-ctos22-e5baup?file=app.component.ts 

Documentation: https://ej2.syncfusion.com/angular/documentation/grid/hierarchy-grid/#adding-record-in-childgrid 

Regards,
Rajapandi R