EditTemplate not working with two way data binding in version ^17.3.27

[Jochim Berkhout]

I'm building an app where the user edits data in a grid. For each column I specify a editTemplate with either a dropdown, numeric textbox, textbox or multiselect to edit the value for the given column. For the controls in the editTemplate I use two way data binding. Recently I build a prototype of this app to see what is possible with the grid and this worked just fine. This week I started building the actual app, but this method seems to fail with the version of the grid. The controls in the editTemplate are shown, but when I save a added record, the record is empty. The controls in de editTemplate doesnt seem to modify the data at all. The version where this method does work is ^17.2.51 and the version where it doesnt work is ^17.3.27. To illustrate the problem I made a test component:

html:

<ejs-grid #grid [dataSource]="data" [toolbar]="toolbar">

    <e-columns>

        <e-column field="number" headerText="Nummer">

            <ng-template #editTemplate let-data>

                <ejs-textbox [(value)]="data.number"></ejs-textbox>

            </ng-template>

        </e-column>

        <e-column field="name" headerText="Naam">

            <ng-template #editTemplate let-data>

                <ejs-textbox [(value)]="data.name"></ejs-textbox>

            </ng-template>

        </e-column>

    </e-columns>

</ejs-grid>

ts:

import { Component, ViewChild } from '@angular/core';

import { GridComponent } from '@syncfusion/ej2-angular-grids';

@Component({

  selector: 'app-test',

  templateUrl: './test.component.html',

  styleUrls: ['./test.component.css']

})

export class TestComponent {

  constructor() { }

  @ViewChild('grid', { static: false }) grid: GridComponent;  

  data: any[] = [{number: 1, name: 'Test'}];

  toolbar: string[] = ['Add', 'Edit', 'Delete', 'Update', 'Cancel'];

  ngAfterViewInit() {

    this.grid.allowKeyboard = false;

    this.grid.editSettings.allowEditing = true;

    this.grid.editSettings.allowAdding = true;

    this.grid.editSettings.allowDeleting = true;

    this.grid.editSettings.mode = 'Normal';

    this.grid.enableHover = false;

  }

}

[Pavithra Subramaniyam]

Hi Jochim, 

 

Greetings from Syncfusion. 

 

You can achieve your requirement by using the below way. Please refer to the below code example. Documentation link and sample link for more information. 

 

[component.ts] 

@Component({ 

    selector: 'app-root', 

    template: `<ejs-grid #grid [dataSource]="data" [toolbar]="toolbar" (actionBegin)="actionBegin($event)"> 

    <e-columns> 

        <e-column field="number1" isPrimaryKey='true' headerText="Nummer"></e-column> 

        <e-column field="number2" headerText="Nummer"> 

            <ng-template #editTemplate let-data> 

                <ejs-textbox [(ngModel)]="orderData.number2"></ejs-textbox> 

            </ng-template> 

        </e-column> 

        <e-column field="name" headerText="Naam"> 

            <ng-template #editTemplate let-data> 

                <ejs-textbox [(ngModel)]="orderData.name"></ejs-textbox> 

            </ng-template> 

        </e-column> 

    </e-columns> 

</ejs-grid>` 

}) 

export class AppComponent { 

   .  .  . 

  actionBegin(args: SaveEventArgs) { 

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

            this.orderData = Object.assign({}, args.rowData); 

        } 

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

            // cast string to integer value. 

            args.data['number2'] = this.orderData['number2']; 

              args.data['name'] = this.orderData['name']; 

        } 

    } 

 

} 

 

 

Documentation: https://ej2.syncfusion.com/angular/documentation/grid/edit/#using-template 

 

Sample               : https://stackblitz.com/edit/angular-textbox-template-cuxezk?file=app.component.html 

 

Please get back to us if you need any further assistance on this. 

 

Regards, 

Pavithra S. 

[Joseph]

That is an awful workaround.  More evidence of how poorly these controls are built and maintained

[Rajapandi Ravi]

Hi Joseph, 

Sorry for the inconvenience caused 

 

We understand that you like to use two-way binding with Edit Template. Based on your query we have prepared a sample and achieved your requirement by setting the column field name as the control name. Please refer the below modified code example and sample for more information. 

 

<ejs-grid #grid [dataSource]="data" [toolbar]="toolbar"> 

    <e-columns> 

        <e-column field="number1" isPrimaryKey='true' headerText="Nummer"></e-column> 

        <e-column field="number2" headerText="Nummer"> //set the column field name to the control name to save the value 

            <ng-template #editTemplate let-data> 

                <ejs-textbox name="number2" [(ngModel)]="data.number2"></ejs-textbox> 

            </ng-template> 

        </e-column> 

        <e-column field="name" headerText="Name"> 

            <ng-template #editTemplate let-data> 

                <ejs-textbox name="name" [(ngModel)]="data.name"></ejs-textbox> 

            </ng-template> 

        </e-column> 

    </e-columns> 

</ejs-grid> 

 

Sample: https://stackblitz.com/edit/angular-textbox-template-jvxi5k?file=app.component.html 

Regards, 

Rajapandi R 

[Marc Eilens]

Hello  Rajapandi Ravi,

your solution using the name attribute of the column in the editor component only works for Syncfusion components, right? At least, our own test using a custom editor component didn't work.

Any suggestions??? Besides using actionBegin event...

Kind regards,

Marc

[Rajapandi Ravi]

Hi Marc, 

In our previous update, we have performed the two-way binding for editTemplate by mapping the column field name and set the same field name to the template component name attribute. So, before we start providing solution on your query, we need some information for our clarification. So please share the below details that will be helpful for us to provide better solution. 

1)         So please confirm you are not able to use name attribute to your custom component. 

2)         Share the details about what problem you are facing while using name attribute in your component. 

3)         So please share the details about what custom component you are rendering in the edit Template. 

4)         Please share your exact requirement scenario with detailed description. 

5)         Please share your complete Grid rendering code, we would like to check how you are implementing that custom component. 

6)         Share your syncfusion package version. 

Regards, 

Rajapandi R