kendo grid Save and Cancel operation from Api call Angular 7

Question

i have bounded a api call response to kendo grid and am able to bind the data in the columns and to do edit and save for a inline edit which i have bound in my html , I see lots of samples binding through component template am not sure if that works in my approach can someone give me some links as am new to kendo. I need to get all the editing row data and then wen i save button it goes to my put api call.TIA

my application

HTML

       <kendo-grid [data]="ForecastProductionQuantity" 
              [pageSize]="10" [pageable]="true" [resizable]="true"
              [scrollable]="scrollable" [filterable]="true"
              [height]="650">
           <kendo-grid-column field="AmgName">
           <ng-template kendoGridHeaderTemplate let-column let-columnIndex="columnIndex">
              {{gridHeaders["AmgName"]}}
      </ng-template>
    </kendo-grid-column>
    <kendo-grid-column field="ProdQty.ProdQty0">
      <ng-template kendoGridHeaderTemplate let-column let-columnIndex="columnIndex">
        {{gridHeaders["ForecastType0"]}}
      </ng-template>
    </kendo-grid-column>
    <kendo-grid-column field="ProdQty.ProdQty1">
      <ng-template kendoGridHeaderTemplate let-column let-columnIndex="columnIndex">
        {{gridHeaders["ForecastType1"]}}
      </ng-template>
    </kendo-grid-column>

  </kendo-grid>
Component.ts
 loadForecastQuantityData() {
//keeping it 0 will be incorporated after Go click is integrated will be changed as per save input 
this.allocationSetupID = 0;
return this.restapi.getForecastProductionQuantityData(this.allocationSetupID, this.ForecastID).subscribe((data: {}) => {
  this.ForecastProductionQuantity = data;

  for (var prod in this.ForecastProductionQuantity) {

    this.gridHeaders = {
      AmgName: "Amg Name",
      ForecastType0: this.ForecastProductionQuantity[prod].Forecast_type.ForecastType0 + " " + this.ForecastProductionQuantity[prod].ProdMonth.ProdMonth0,
      ForecastType1: this.ForecastProductionQuantity[prod].Forecast_type.ForecastType1 + " " + this.ForecastProductionQuantity[prod].ProdMonth.ProdMonth1,

    }

  }

}, (err) => {
  console.log(err);

})
 }
  service.ts
getForecastProductionQuantityData(allocationSetupID: any, ForecastID: any): Observable<any> {
return this.http.get<any>(this.apiURL + '/GetProductionVolume/' + allocationSetupID + '/' + 
  ForecastID )
  .pipe(
    retry(1),
    catchError(this.handleError)
  )
  }

xinthose xinthose · Accepted Answer · 2020-03-14T18:13:52

Have you followed Kendo's example here? It is what I use in my application. In the (save)="saveHandler($event)" function in TypeScript, send the data to your API service to save. The asynchronous view will automatically update after the data posts.

kendo grid Save and Cancel operation from Api call Angular 7

1 Answers