Angular - kendo data binding

Question

I'm using a kendo grid and have a checkbox column with the following template:

"<input class='gridCheckbox' id='gridCheckbox_#=name#' name='Selected' type='checkbox' ng-model='dataItem.checked'/>"

In addition I'm also using an observableArray as the grid's dataSource. When clicking the chekcbox the data in the observableArray is changed as expected but no "change" event is triggered. Here is how I define the observableArray:

var obsArray = new kendo.data.ObservableArray(scope.gridData);
this.gridDataSource = new kendo.data.DataSource({
     data: obsArray
 });
 obsArray.bind("change", function (e) {
     console.log(e.action, e.field);
 });

"scope.gridData" is the original dataModel. When I click the checkbox the observableArray is changed but not the "scope.gridData". In order to change the "scope.gridData" I want to listen to the "change" event and change the "scope.gridData" manually but as I said the "change" event is not triggered.

Any suggestions to what am I doing wrong and maybe there is a better solution.

score 1 · Answer 1 · answered Mar 20 '15 at 01:07

1

Read This

your issue is that kendo uses a copy of your scope object

answered Mar 20 '15 at 01:07

Jason

2,451
2
23
31

score 0 · Answer 2 · answered Oct 28 '14 at 19:06

I manually added an event to my input checkbox (in our class we're using Angular so it was on ng-click="doSomething()" but maybe yours is just click="doSomething" and recorded handling the boolean change manually.

We have the Kendo Observables, too - but I got **lucky because we're also using the Breeze JS stuff where we can do data detection and refresh the grid once the data propagates backwards to the right place to be set to dirty. ( grid.dataSource.read(); )

If you want the full row value, make the click="doSomething(this)" and then capture it as the Sender. Just debug in and you should the dataItem attached to the Sender.

Let me know if you figure out the binding in the other direction - I can't get the checkbox to be checked when the grid first appears... — Jeremy, Oct 28 '14 at 19:06

score 0 · Answer 3 · answered Aug 11 '16 at 06:12

This might help you & this is not the correct figure but i did one example like this similar to your problem

 var contentData = [
      { organization: 'Nihilent', os: 'Window' }
    ];

    var nihl = contentData[0];

    var viewModel = kendo.observable({
      gridSource: new kendo.contentData.DataSource({
        contentData: contentData
      })
    });

    kendo.bind($(document.body), viewModel);

    contentData.push({ organization: 'Dhuaan', os: 'Android' });

    nihl.set('os', 'iOS');

Angular - kendo data binding

3 Answers3