This is a migrated thread and some comments may be shown as answers.

Angular Kendo Grid Two Way Binding

3 Answers 859 Views

Grid

This is a migrated thread and some comments may be shown as answers.

Oliver asked on 22 Sep 2015, 04:59 AM

I am using the Kendo Grid with Angular but I was wondering what is the recommended way to have an editable text box in a cell within the grid.

I can't seem to get 2 way data binding working from the grid's own dataItem scope back to the original binding model.

Here's how I have done it using ng-change which works but seems like the incorrect way to me.

In my controller's init function I have:

vm.gridOptions = {
scrollable: false,
dataSource: new kendo.data.DataSource(),
columns: [
{
title: "Service Category",
field: "ServiceCategoryName"
},
{
title: "Service",
field: "ServiceName"
},
{
title: "Quantity",
width: "120px",
template: "<input type='text' ng-model='dataItem.Quantity' ng-change='vm.quantityChanged(dataItem)' />"
}
]
};

Later I call from the controller:

formCommonFactory.populateKendoGrid(vm.gridOptions, vm.costCentreGroups);

And this is my function I use to populate the grid called from the controller.

function populateKendoGrid(gridOptions, values) {

var d = new kendo.data.DataSource({
data: values
});

d.read();

gridOptions.dataSource.data(d.data());

};

Thanks,

Oliver

Angular Kendo Grid Two Way Binding

3 Answers, 1 is accepted