Hi,
2. I also want to know how to include command column in this child grid
Component.ts
Regards
Charles
Hi Charles,
Based on your query, when you edit the value of on column in the child grid you want to change the value of another column, you also want to add command column for the child grid. Refer the below sample, in which when you edit a column in the child grid using the dropdown in the edit template, and also added the command column for the child grid.
Refer the below code example:
public itemParams: IEditCell = { create: () => { this.itemElem = document.createElement('input'); return this.itemElem; }, read: () => { return this.itemObj.value; }, destroy: () => { this.itemObj.destroy(); }, write: (args) => { this.itemObj = new DropDownList({ dataSource: [ { Id: 10, Item: 'Item1', UnitPrice: 40 }, { Id: 20, Item: 'Item2', UnitPrice: 50 }, { Id: 30, Item: 'Item3', UnitPrice: 60 }, { Id: 40, Item: 'Item4', UnitPrice: 70 }, ], fields: { value: 'Id', text: 'Item' }, change: (args) => { var childGridInstance = args.element.closest('.e-grid').ej2_instances[0]; childGridInstance.editModule.formObj.element.querySelector( ('#' + childGridInstance.element.id + 'UnitPrice') as any ).ej2_instances[0].value = args.itemData.UnitPrice; }, value: args.rowData[args.column.field], placeholder: 'Item/Produce', floatLabelType: 'Always', }); this.itemObj.appendTo(this.itemElem); }, };
this.childGrid = { toolbar: ['Add', 'Edit', 'Delete', 'Update', 'Cancel'], editSettings: { allowEditing: true, allowAdding: true, allowDeleting: true, }, dataSource: [ ----------------------- ----------------------- ], queryString: 'stockInHeaderId', allowPaging: false, allowSorting: 'true', allowResizing: true, columns: [ { field: 'id', headerText: 'S.No.', width: 120, }, { field: 'itemCode', headerText: 'Item Code', width: 120, }, { field: 'quantity', headerText: 'Item', edit: this.itemParams, width: 150, }, { field: 'UnitPrice', headerText: 'Unit Price', width: 150, }, { headerText: 'Action', width: 150,
commands: [ { type: 'Delete', buttonOption: { cssClass: 'e-flat', iconCss: 'e-icons e-delete' }, }, ], }, ], };
|
Sample: https://stackblitz.com/edit/angular-6cc8vs-6msfbd?file=app.component.ts,app.component.html
Regards,
Joseph I.