javascript - DevExtreme DataGrid with Angular: Remove automated save after edit -

i'm using datagrid widget (from devextreme lib) angular app.

the datagrid works well, , editing actions automatically saved.

i want cancel automated save action , replace with:

• a simple button save when clicked.

here code:

app.component.ts

import { ngmodule, component, enableprodmode } '@angular/core'; import { browsermodule } '@angular/platform-browser'; import { platformbrowserdynamic } '@angular/platform-browser-dynamic'; import { dxdatagridmodule } 'devextreme-angular'; import { customer, service } './app.service';  if(!/localhost/.test(document.location.host)) {     enableprodmode(); }  @component({     styleurls: ['app/app.component.css'],     selector: 'demo-app',     templateurl: 'app/app.component.html',     providers: [service] }) export class appcomponent {     customers: customer[];      constructor(service: service) {         this.customers =  service.getcustomers();     } } 

app.component.html

<dx-data-grid     id="gridcontainer"     [datasource]="customers"     [columns]="['companyname', 'city', 'state', 'phone', 'fax']"> </dx-data-grid> 

app.service.ts

import { injectable } '@angular/core';  export class customer {     id: number;     companyname: string;     address: string;     city: string;     state: string;     zipcode: number;     phone: string;     fax: string;     website: string; }  let customers: customer[] = [{     "id": 1,     "companyname": "super mart of west",     "address": "702 sw 8th street",     "city": "bentonville",     "state": "arkansas",     "zipcode": 72716,     "phone": "(800) 555-2797",     "fax": "(800) 555-2171",     "website": "http://www.nowebsitesupermart.com" }, {     "id": 2,     "companyname": "electronics depot",     "address": "2455 paces ferry road nw",     "city": "atlanta",     "state": "georgia",     "zipcode": 30339,     "phone": "(800) 595-3232",     "fax": "(800) 595-3231",     "website": "http://www.nowebsitedepot.com" }, {     "id": 3,     "companyname": "k&s music",     "address": "1000 nicllet mall",     "city": "minneapolis",     "state": "minnesota",     "zipcode": 55403,     "phone": "(612) 304-6073",     "fax": "(612) 304-6074",     "website": "http://www.nowebsitemusic.com" }, {     "id": 4,     "companyname": "tom's club",     "address": "999 lake drive",     "city": "issaquah",     "state": "washington",     "zipcode": 98027,     "phone": "(800) 955-2292",     "fax": "(800) 955-2293",     "website": "http://www.nowebsitetomsclub.com" }, {     "id": 5,     "companyname": "e-mart",     "address": "3333 beverly rd",     "city": "hoffman estates",     "state": "illinois",     "zipcode": 60179,     "phone": "(847) 286-2500",     "fax": "(847) 286-2501",     "website": "http://www.nowebsiteemart.com" }, {     "id": 6,     "companyname": "walters",     "address": "200 wilmot rd",     "city": "deerfield",     "state": "illinois",     "zipcode": 60015,     "phone": "(847) 940-2500",     "fax": "(847) 940-2501",     "website": "http://www.nowebsitewalters.com" }, {     "id": 7,     "companyname": "stereoshack",     "address": "400 commerce s",     "city": "fort worth",     "state": "texas",     "zipcode": 76102,     "phone": "(817) 820-0741",     "fax": "(817) 820-0742",     "website": "http://www.nowebsiteshack.com" }, {     "id": 8,     "companyname": "circuit town",     "address": "2200 kensington court",     "city": "oak brook",     "state": "illinois",     "zipcode": 60523,     "phone": "(800) 955-2929",     "fax": "(800) 955-9392",     "website": "http://www.nowebsitecircuittown.com" }, {     "id": 9,     "companyname": "premier buy",     "address": "7601 penn avenue south",     "city": "richfield",     "state": "minnesota",     "zipcode": 55423,     "phone": "(612) 291-1000",     "fax": "(612) 291-2001",     "website": "http://www.nowebsitepremierbuy.com" }, {     "id": 10,     "companyname": "electrixmax",     "address": "263 shuman blvd",     "city": "naperville",     "state": "illinois",     "zipcode": 60563,     "phone": "(630) 438-7800",     "fax": "(630) 438-7801",     "website": "http://www.nowebsiteelectrixmax.com" }, {     "id": 11,     "companyname": "video emporium",     "address": "1201 elm street",     "city": "dallas",     "state": "texas",     "zipcode": 75270,     "phone": "(214) 854-3000",     "fax": "(214) 854-3001",     "website": "http://www.nowebsitevideoemporium.com" }, {     "id": 12,     "companyname": "screen shop",     "address": "1000 lowes blvd",     "city": "mooresville",     "state": "north carolina",     "zipcode": 28117,     "phone": "(800) 445-6937",     "fax": "(800) 445-6938",     "website": "http://www.nowebsitescreenshop.com" }];  @injectable() export class service {     getcustomers() {         return customers;     } } 

any suggestions?

batch edits
if want user edit multiple rows , save changes together, can make use of 'batch edit' feature in devextreme. official documentaion
add dxo-editing tag shown here

<dx-data-grid     id="gridcontainer"     [datasource]="customers"     [columns]="['companyname', 'city', 'state', 'phone', 'fax']">          <dxo-editing              mode="batch"             [allowupdating]="true">         </dxo-editing>  </dx-data-grid> 

row row edit
if want user edit 1 row @ time, can make use of 'row edit' feature in devextreme. official documentation
add dxo-editing tag shown here

<dx-data-grid     id="gridcontainer"     [datasource]="customers"     [columns]="['companyname', 'city', 'state', 'phone', 'fax']">          <dxo-editing              mode="row"             [allowupdating]="true">         </dxo-editing>  </dx-data-grid>