angularjscomboboxkendo-uiangular-kendo

Angular-Kendo ComboBox placeholder text not working


I have a simple angular-kendo ComboBox on a page without an initially selected value. It should show the placeholder text in that case, but instead it's showing ? undefined:undefined ?

HTML

<select kendo-combo-box ng-model="Project" k-options='projectOptions'></select>

JS

app.controller('MyCtrl', function($scope) {    
  $scope.projectData = [
    {name: 'Bob', value: 1},
    {name: 'Tom', value: 2}
  ];

  $scope.projectOptions = {
    placeholder: "'Select...'",
    dataTextField: 'name',
    dataValueField: 'value',
    dataSource: {
      data: $scope.projectData
    }
  }
});

Here's a plunker that shows the problem. Can anyone spot the cause?

This used to work in an older version of angular-kendo, but it's not working in the current version.


Solution

  • This is somewhat related to this issue: https://github.com/angular/angular.js/issues/1019

    The solution is simple: use an <input> instead of a <select> element:

    <input kendo-combo-box ng-model="Project" k-options='projectOptions'/>
    
    app.controller('MyCtrl', function($scope) {
      $scope.projectData = [
        {name: 'Bob', value: 1},
        {name: 'Tom', value: 2}
      ];
    
      $scope.projectOptions = {
        placeholder: "'Select...'",
        dataTextField: 'name',
        dataValueField: 'value',
        dataSource: {
          data: $scope.projectData
        }
      }
    });
    

    (demo)