Angular Kendo Dropdownlist automatically adds blank option

0
votes

I am using angular kendo and having a strange issue with kendo's dropdownlist control that the field bound with the first dropdown control on the form has by default ? undefined:undefined ? in it. Although the generated html has selected="selected" in first option. When I explicitly select a value in dropdown the model is updated properly.

The dropdown is filled with an array in root scope.

Also noticed that if I enable chrome's extension AngularJS Batarang then it works as well.

I did debugging of angular-kendo and found out that kendo is automatically adding blank option which has value of ? undefined:undefined ?.

<select class="s-select" kendo-drop-down-list k-data-source="lookupCache.getLookupValues('gender')" k-data-text-field="'DisplayName'" k-data-value-field="'Id'" k-value="'M'" ng-model="Model.Gender" />

where Model is {} by default

2
javascriptjqueryangularjskendo-uikendo-dropdown

2 Answers

2
votes

For dynamic data source you can use data-option-label, like follows:

     <select name="packageName" id="packageName"
       kendo-drop-down-list 
       k-options="dropDownListOptions"
       k-ng-model="packageSelected" 
       ng-model="packageTypeId" 
       data-option-label="{value:'Select...',name:''}"/>
0
votes

Its a strange issue in the Kendo UI.

My workaround :

Dont give the kendo-drop-down-list tag in the select list. Rather make it kendo by JS function.

HTML : 

 <select id="searchisActive" ng-model="ngsearchisActive" ng-change="applyFilter()">
                <option value="-1">All</option>
                <option value="1">Active</option>
                <option value="0">Inactive</option>
            </select>

JS :

  $(function () {        
    $("#searchisActive").kendoDropDownList();
});