CODEWITHSUNDEEP
javascriptangularjskendo-uitelerik
Denis Biondic
Denis Biondic

Reputation: 8201

How to update k-ng-model (a.k.a. two-way binding like with ng-model)

Does Kendo k-ng-model support two-way binding, and if not, what is the best approach to simulate it?

A bit of context:

In angular, when an update to ng-model is done, all interested parties are updated (e.g. view is refreshed). In kendo, when using k-ng-model, I cannot find a way of doing the same, where I would want to set the value from the controller / directive directly.

Here is an example: Coding Dojo

And, just in case, the code as well:

 <input kendo-auto-complete 
        k-ng-model="vm.kendoSelection" 
        ng-model="vm.angularSelection"                     
        k-data-source="vm.countryNames" 
        k-data-value-field="'name'"
        k-data-text-field="'name'" />

sample controller:

  angular.module("MyApp", [ "kendo.directives" ])
         .controller("Controller", function(){                  
             // just some data source
             this.countryNames = [
                { name: "Albania" },
                { name: "Andorra" }
              ];

             // how to set the k-ng-model here, so that it is also propagated properly (like on 
             // the view, and that other events like k-on-change work)?
             this.kendoSelection = { name: "Albania" };                  
          });

EDIT:

Even after the answer from Dion Dirza, the k-on-change is not firing (altough it is a solution in good direction)

Example with k-on-change

Dion Dirza

Upvotes: 4

Views: 4838

Answers (1)

Dion D.
Dion D.

Reputation: 2596

As documentation said, that k-ng-model should store or return actual type of widget value. Therefore to make your variable kendoSelection work, you should define it as actual type of widget value, which in this case is array type for auto-complete widget.

Change your code

vm.kendoSelection = [{ name: "Albania" }];

Because you are storing object array here so your variable should be array of object. Put a caution here that your object should contains a property that defined as widget data-value-field which it will be used for comparison with current data source.

Upvotes: 3

Related Questions