我将api调用响应绑定到kendo网格,并且能够绑定列中的数据,并且可以进行编辑和保存以进行我绑定到html中的内联编辑,我看到很多通过组件模板绑定的示例不知道这是否对我有效,是否有人可以给我一些剑道的新链接。我需要获取所有编辑行数据,然后单击“保存”按钮,将其转到我的put api调用。[TIA
我的应用程序
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)
)
}
您是否遵循剑道的榜样here?这是我在应用程序中使用的。在TypeScript的(save)="saveHandler($event)"
函数中,将数据发送到您的API服务进行保存。数据发布后,异步视图将自动更新。