We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. (Last updated on: June 24, 2019).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

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

Thread ID:

Created:

Updated:

Platform:

Replies:

149261 Nov 20,2019 09:26 AM UTC Nov 21,2019 05:56 AM UTC Angular - EJ 2 1
loading
Tags: Grid
Jochim Berkhout
Asked On November 20, 2019 09:26 AM UTC

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 { ComponentViewChild } 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 }) gridGridComponent;  
  dataany[] = [{number: 1name: 'Test'}];
  toolbarstring[] = ['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 [Syncfusion]
Replied On November 21, 2019 05:56 AM UTC

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']; 
        } 
    } 
 
} 
 
 
 
 
Please get back to us if you need any further assistance on this. 
 
Regards, 
Pavithra S. 


CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Please sign in to access our forum

This page will automatically be redirected to the sign-in page in 10 seconds.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

Live Chat Icon For mobile
Live Chat Icon