Column of Child Grid not binding value

[Fabio]

Hi,

I have a Column where I defined a <ng-template> in edit mode like this:

this.childGrid = {

dataSource: this.childElements,

queryString: 'fKey',

columns: [

{ field: 'description', headerText: 'Description', textAlign: 'Left', width: '50%'},

{ field: 'qty', headerText: 'qty', textAlign: 'Left', width: 20,

editTemplate:

'<ng-template #editTemplate let-data> ' +

'<mat-form-field fxFlex="100"> '+

'<input [(ngModel)]="measureQty" matInput> '+

'</mat-form-field> '+

'</ng-template>' },

{ field: 'width', headerText: 'Lar', editType:'NumericTextBox', textAlign: 'Left', width: 20 },

{ field: 'length', headerText: 'Lun', editType:'NumericTextBox', textAlign: 'Left', width: 20 },

{ field: 'height', headerText: 'Alt', editType:'NumericTextBox', textAlign: 'Left', width: 20 },

{ field: 'totalMeasure', headerText: 'Misura', editType:'NumericTextBox', textAlign: 'Left', width: 20, allowEditing: false,},

{ headerText:'', width:20, commands: [{ type: 'Edit', buttonOption: { cssClass: 'e-flat', iconCss: 'e-edit e-icons' } },

{ type: 'Delete', buttonOption: { cssClass: 'e-flat', iconCss: 'e-delete e-icons' } },

{ type: 'Save', buttonOption: { cssClass: 'e-flat', iconCss: 'e-update e-icons' } },

{ type: 'Cancel', buttonOption: { cssClass: 'e-flat', iconCss: 'e-cancel-icon e-icons' }}]

},

],

actionBegin: (args: SaveEventArgs) => {

this.measureActionBegin(args);

},

};

When I enter in edit mode on child grid, the function actionBegin exec this:

async measureActionBegin(args: SaveEventArgs){

if (args.requestType === 'beginEdit') {

this.measureQty = args.rowData['qty'];

}

}

So, this.measureQty contain the value that I want bind, but the value not appears.

What am I doing wrong?

Thanks

[Sujith Kumar Rajkumar]

Hi Fabio, 

 

Greetings from Syncfusion support. 

 

Based on the query we could understand that your requirement is to render a custom edit control using ng-template for the child Grid. You can achieve this requirement by rendering the child Grid edit template in angular way and assigning it to its corresponding columns ‘editTemplate’ property as demonstrated in the below code snippets, 

 

app.component.html 

<ng-template #editTemplate let-data> 

    <ejs-textbox id="CustomerID" [(ngModel)]="customVal" placeholder="Enter value" cssClass="e-outline"></ejs-textbox> 

</ng-template> 

 

app.component.ts 

import { Component, Inject, OnInit, ViewChild, ViewContainerRef, ViewEncapsulation } from '@angular/core'; 

 

export class AppComponent { 

   @ViewChild('editTemplate', { static: true }) public editTemp: any; 

    public customVal; 

 

    constructor(@Inject(ViewContainerRef) private viewContainerRef?: ViewContainerRef) { 

 

    } 

 

    ngAfterViewInit() { 

        this.editTemp.elementRef.nativeElement._viewContainerRef = this.viewContainerRef; 

        this.editTemp.elementRef.nativeElement.propName = 'template'; 

    } 

 

    ngOnInit(): void { 

        this.childGrid = { 

            load() { 

                // Set registertemplate value as empty in load event 

                this.registeredTemplate = {}; 

            }, 

            columns: [ 

                    ... 

                  { field: 'CustomerID', headerText: 'Customer ID', editTemplate: this.editTemp}, 

            ], 

            actionBegin: (args) => { 

                  if (args.requestType === 'beginEdit' || args.requestType === 'add') { 

                      this.customVal = args.rowData['CustomerID']; 

                  } 

                  if (args.requestType === 'save') { 

                      args.data['CustomerID'] = this.customVal; 

                  } 

            } 

     }; 

  } 

} 

 

We have prepared a sample based on this for your reference. You can find it below, 

 

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

 

More details on rendering angular template in child Grid column can be checked in the below documentation link, 

 

Documentation: https://ej2.syncfusion.com/angular/documentation/grid/hierarchy-grid/#template-column-in-child-grid 

 

Please get back to us if you require any further assistance. 

 

Regards, 

Sujith R