However, in your Kendo DataSource vs AngularJS Scope documentation (http://docs.telerik.com/kendo-ui/AngularJS/data-source), you specifically mention the problem of using the grid with a standard Javascript object as it will not reflect changes in the grid. You then say that the "fix" to this is to use an ObservableArray as the grid's data source. However, an ObservableArray is part of your MVVM framework.
In light of this, what is Telerik's suggested approach? I tend to agree that AngularJS models and Kendo MVVM should not be mixed. However, then how can the grid work correctly with plain AngularJS Javascript models?
And the reverse is also problematic - if using Kendo MVVM as the View Model, then creating other widgets (eg DateTimePicker, ComboBox, etc) using the Angular-Kendo bindings will fail to appropriately trigger events on the MVVM constructs like ObservableObject, ObservableArray, etc.
Can you please provide guidance on whether or not Kendo MVVM should be used with Angular-Kendo or not? If yes, please provide examples of how to bind Angular-Kendo widgets to MVVM models complete with event triggering. If no, please provide examples of how to work correctly with the grid when using plain Javascript objects as the DataSource.
3 Answers, 1 is accepted
Hello Yaron,
You are right that Kendo UI MVVM and AngularJS are similar but mutually exclusive, therefore they should not be used together. As for using the observable array - the Kendo UI DataSource will still use observable array even with the AngularJS bindings, and this is perfectly fine, and should not worry you, as even if you pass a plain array it will be converted to an observable one in the background as the widgets still rely on this functionality. As for a demo, here is a link:
Regards,Kiril Nikolov
Telerik
Rank 1
Unfortunately, the solution you provided is not good because even though the grid is being provided with a plain Javascript model object, it is duplicating it by creating an observable array out of it. In other words, the real model that you have and that is tied into Angular bindings is no longer connected with the model the grid has, as the grid is using a new observable array object. This makes it so that any changes that happen in the grid will not be reflected to the original Javascript object that is used throughout the rest of the Angular application.
Please let me know your thoughts.
Hello Yaron,
The Grid does not have a ng-model directive for example, so the data is automatically updated in a two-way binding to the model. However there are remote data operations, that can also work with local data via custom transport definitions, so you can update the data back to the original array. Here is an example that you can adapt for AngularJS usage:
http://docs.telerik.com/kendo-ui/web/grid/how-to/grid-localstorage-crud
Regards,Kiril Nikolov
Telerik