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

9 posts, 0 answers
  1. Tulasinath
    Tulasinath  avatar
    6 posts
    Member since:
    Jul 2014

    Posted 31 Jul 2014 Link to this post

    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
  2. Mihai
    Admin
    Mihai avatar
    153 posts

    Posted 01 Aug 2014 Link to this post

    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
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  3. Mihai
    Admin
    Mihai avatar
    153 posts

    Posted 01 Aug 2014 Link to this post

    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
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  4. Tulasinath
    Tulasinath  avatar
    6 posts
    Member since:
    Jul 2014

    Posted 03 Aug 2014 Link to this post

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

    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.


    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.
  5. Mihai
    Admin
    Mihai avatar
    153 posts

    Posted 04 Aug 2014 Link to this post

    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
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  6. ddn
    ddn avatar
    1 posts
    Member since:
    Aug 2014

    Posted 05 Aug 2014 Link to this post

    many thanks all
  7. Tulasinath
    Tulasinath  avatar
    6 posts
    Member since:
    Jul 2014

    Posted 05 Aug 2014 Link to this post

    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
  8. Tulasinath
    Tulasinath  avatar
    6 posts
    Member since:
    Jul 2014

    Posted 08 Aug 2014 Link to this post

    Any updates on this? 
  9. Mihai
    Admin
    Mihai avatar
    153 posts

    Posted 08 Aug 2014 Link to this post

    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
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
Back to Top