2

I have a Kendo Dropdownlist bound to an ObservableArray/DataSource. It duly fills the values from array. But when I bind ng-model to a property, the dropdownlist fails to select the value.

HTML:

<select kendo-drop-down-list k-options="dropOptions" ng-model="user.id"></select>

JS:

var users = [
  { id: 1, name: 'A' },
  { id: 2, name: 'B' },
  { id: 3, name: 'C' },
  { id: 4, name: 'D' },
  { id: 5, name: 'E' },
  { id: 6, name: 'F' }
];

var usersDataSource = new kendo.data.ObservableArray(users);

$scope.dropOptions = {
  dataSource: usersDataSource,
  dataTextField: 'name',
  dataValueField: 'id',
  optionLabel: "Select one..."
};

$scope.welcome = "World";
$scope.user = { id: 3 }

$scope.user = { id: 3 } should force dropdownlist to select C.

Here is link to Plunkr: http://plnkr.co/edit/BxTqWet5sz725ZtKEKJr?p=preview

How can I for dropdownlist to make selection based on value assigned in property bound with ng-model. I have used k-ng-model as well, but it doesn't work. Please help me what am I doing wrong here. Thank you.

Edit: The selection in dropdownlist is not hardcoded. It will be fetched from database.

Ritesh
  • 362
  • 1
  • 5
  • 19

7 Answers7

3

I was using Angular 1.4.9 with Kendo v2015.3.1111. Downgrading to Angular 1.4.8 made it work.

Ritesh
  • 362
  • 1
  • 5
  • 19
  • I am having exact same problem during AngularJs update part of Angular migration. If i upgrade Kendo that would fix the problem. Unfortunately i can't downgrade AngularJs or update Kendo at the moment. Did you eventually find out what's wrong with it or found a fix? Apart from downgrading AngularJs. – Laurence Feb 11 '19 at 16:36
3

I got a solution that works. 

  <select kendo-drop-down-list
         k-options="odsSoluciones"
         k-data-text-field="'descripcion'"
         k-data-value-field="'solucionId'"
         k-value="prescDPIntercambio.solucionDPId"
         ng-model="prescDPIntercambio.solucionDPId">
 </select>


$scope.odsSoluciones = 
     dataSource: new kendo.data.DataSource({
         data: solucionesModel.data,
         }),
    };

In my case odsSoluciones returns an array with "solucionId" and "descripcion" fields and prescDPIntercambio.solucionDPId is the value I want to see selected

Suminch
  • 41
  • 5
1

Kendo dropdown value does not reflect selection based on ng-model. Instead it provides a new attribute : k-ng-model

For a basic example, have a look at this: k-ng-model

ashfaq.p
  • 5,379
  • 21
  • 35
  • Did you check the demo plunker ? – ashfaq.p Feb 04 '16 at 08:04
  • Yes, I did check it yesterday. – Ritesh Feb 04 '16 at 08:05
  • Try by giving the options in the html just like the demo, instead of using k-options. – ashfaq.p Feb 04 '16 at 08:06
  • 1
    Thanks Ashfaq for your replies. Somehow Angular 1.4.9 didn't work with Kendo UI. I tried even Kendo v2016, but no success. Then I tried downgrading Angular to older version, the selection started working. I am gonna report this to Kendo. – Ritesh Feb 04 '16 at 08:20
  • That is strange though. – ashfaq.p Feb 04 '16 at 08:21
  • I am having exact same problem during AngularJs update part of Angular migration. If i upgrade Kendo that would fix the problem. Unfortunately i can't downgrade AngularJs or update Kendo at the moment. Did you eventually find out what's wrong with it or found a fix? Apart from downgrading AngularJs. – Laurence Feb 11 '19 at 16:36
1

Just add k-value = "user.id"to the template.

Working Plunker

Cursune
  • 48
  • 5
0
<div ng-controller="AppCtrl">
  <h1>Hello {{ welcome }}!</h1>
  <div>Selected value is {{ user.id }}</div>
  <select kendo-drop-down-list 
          k-options="dropOptions"
          ng-model="user.id"
          value= 3
          class="glow"></select>
</div>
jengacode
  • 128
  • 1
  • 9
  • The value is not fixed. It will be retrieved from DB. I just used 3 for sample purpose. – Ritesh Feb 04 '16 at 05:38
  • You could use [get](https://docs.angularjs.org/api/ng/service/$http) and pass the result to value – jengacode Feb 04 '16 at 05:43
  • My question is not how to set value. May be I am not clear. Kendo dropdownlist is not updating the selection based on value in property, `user.id`, bound using ng-model. – Ritesh Feb 04 '16 at 05:47
0

There is a wierd situation where when I declare the ng-model as an object for example $scope.abc.xyz = "test" ,the bind works whereas if I do $scope.abc = "test" , the bind does not work. Not sure what the issue is :)

karthik339
  • 199
  • 1
  • 6
0

If anyone facing the same problem. Try add k-value-primative="true" to dropdown list first.

Greg Ku
  • 1
  • 1