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

Angular Kendo Grid Two Way Binding

3 Answers 439 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Oliver
Top achievements
Rank 1
Oliver asked on 22 Sep 2015, 04:59 AM

Hi

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

3 Answers, 1 is accepted

Sort by
0
Petyo
Telerik team
answered on 24 Sep 2015, 07:44 AM

Hello Oliver,

 

The approach is not the most beautiful one indeed but unavoidable, currently. The ng-model will perform direct assignment to the dataItem field, bypassing the set method of the observable. This is described at the end of this help article

 

Regards,
Petyo
Telerik
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
0
Oliver
Top achievements
Rank 1
answered on 24 Sep 2015, 08:50 AM

Hi Petyo,

 

Thanks for the response. I am now doing it like this from the control in my template:

ng-model='vm.addedServices[vm.getRowIndex(dataItem)].Quantity'

A calculate the array index with the primary key which works fine.

Having said that is there a way to access the current row index from within the template? e.g. dataItem.$index or something similar?

 

Thanks again,

 Oliver

0
Petyo
Telerik team
answered on 28 Sep 2015, 07:29 AM

Hello Oliver,

 

you may obtain the index of the dataItem in the datasource collection, if this helps somehow - please check this method.

 

Regards,

 

Petyo

Telerik

 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
Tags
Grid
Asked by
Oliver
Top achievements
Rank 1
Answers by
Petyo
Telerik team
Oliver
Top achievements
Rank 1
Share this question
or