using ng-model instead of k-ng-model adds undefined option in options of Kendo DropDownlist

[Tulasinath]

Hi ,

I am using Kendo Angular DropDown List with kendo version  2014.2.716.

Using ng-model instead of k-ng-model adds undefined option in options of Kendo DropDownlist. Inside my app the angular bindings are happening with ng-model but they fail to work with k-ng-model. So I would want to work with ng-model. However I am facing issues with ng-model and KendoDropDownList.
The kendo angular documentation says that i can use ng-model. (http://kendo-labs.github.io/angular-kendo/#/basics   - Integration With AngularJS Models)


BUT in the example i have posted below. Angular bindings work both with ng-model and k-ng-model.

using ng-model instead of k-ng-model adds undefined option in options of Kendo DropDownlist

http://dojo.telerik.com/@tntv/ujeD/7


Please help me on this

[Mihai]

Hi,

The empty option is added by Angular, as can be seen in this ticket and hundreds of other pages.  Now it's a fact that it should not add the option if the select value is initialized in the $scope, which is the case in your example.  But I couldn't figure out why it adds it.

I discovered that if I comment out the transclusion from our directive (see this patch) then it works as expected.  However that patch was reverted because it created other problems.

In short, the only workaround I know of is to use a data source, instead of initializing the drop-down with <option> elements.  Or, use a different element, for instance a <ul> instead of a <select>.

Here is an example using a data source: http://dojo.telerik.com/@mishoo/UDOr

Hope this helps.

Regards,
Mihai
Telerik

 

 

[Mihai]

Hi,

I was wrong, correction: the <ul> does not work.  So the only remaining option is use <select> with a data source, or  use k-ng-model instead of ng-model.

Regards,
Mihai
Telerik

 

 

[Tulasinath]

The main problem I am facing with k-ng-model .

[quote]Inside my app the angular bindings are happening with ng-model but they fail to work with k-ng-model. So I would want to work with ng-model.[/quote]

Could you please let me know as to  what is the difference between k-ng-model and ng-model. ? Probably you could point me at the possible reasons as to why my k-ng-model dont work as expected where as ng-model works fine.

[Mihai]

Hello,

K-ng-model works fine for me: http://dojo.telerik.com/iwuFA.  Can you explain what is the problem you're seeing with it?

The difference is explained in the documentation.  Check these two sections.  In short, k-ng-model binds the widget's "logical" value, for instance a Date object for the case of a date picker, while ng-model would bind the string value of the field (the formatted date as a string, instead of a JS Date object).  Hope this clarifies.

Regards,
Mihai
Telerik

 

 

[ddn]

many thanks all

[Tulasinath]

Hi,

In the below example you see that the k-ng-model binding is not working  where as ng-model is working.

I have tried to reproduce the scenario in which I am facing the issue.I  have given a smaller version of my issue in the link. (The undefined  option in the options is not visible here with both ng-binding and k-ng-binding. Not sure why)

http://dojo.telerik.com/UDaXe/5

Please let me know if you find anything.
Thanks and Regards,
Tulasinath

[Tulasinath]

Any updates on this? 

[Mihai]

Hi,

Seems you're using k-ng-model on the second <select> in your directive HTML, but it's not a Kendo component.  K-ng-model only works on elements that define Kendo widgets.  I added kendo-dropdownlist attribute and it now appears to work properly: http://dojo.telerik.com/UDaXe/7

Regards,
Mihai
Telerik