Angular ngmodel binding to objects

16 posts, 1 answers
  1. rick
    rick avatar
    6 posts
    Member since:
    May 2014

    Posted 29 May 2014 Link to this post

    It doesn't appear that the autocomplete supports binding ngModel to objects.  Are there plans to support this feature?  For example, if I configured the autocomplete directive w/ a datasource that is a collection of objects, there is no way that I know of to configure autocomplete where it can bind ngModel to the object that is selected from the result list.  From my experience, the autocomplete directive requires you to specify a data-text-field in this scenario, and the value from the selection is always a string.  Ultimately, what I'm looking for is for the autocomplete to do something like the angular bootstrap typeahead, which can be seen from this plunkr example (See the 'Custom templates' example.  Notice  how the model is actually an object but the input field value comes from the name property of the model):

    http://plnkr.co/edit/?p=preview
  2. con_ssc
    con_ssc avatar
    87 posts
    Member since:
    Apr 2014

    Posted 30 May 2014 in reply to rick Link to this post

    I could be wrong but that seems to be the wrong link.
  3. Kendo UI is VS 2017 Ready
  4. con_ssc
    con_ssc avatar
    87 posts
    Member since:
    Apr 2014

    Posted 30 May 2014 in reply to rick Link to this post

    I think I don't fully understand your problem but the dataTextField is only the string notation of an object I think so you could do something like "Person.Name" as well.
  5. rick
    rick avatar
    6 posts
    Member since:
    May 2014

    Posted 02 Jun 2014 Link to this post

    Hi stefan,  sorry about the link, it'll definitely help give a better explanation of what i'm talking about.  Here's the corrected link...http://plnkr.co/edit/7A5t3UXQUvpImHLmz4g9?p=preview.  In the last text field of the plunker example, if you type in something like 'a', and then select 'Alaska', you will see the model updated to reflect a javascript object being bound to the ngmodel of customSelected, but the text field shows 'Alaska'.  Is there a way to achieve that same result w/ the kendo autocomplete?
  6. con_ssc
    con_ssc avatar
    87 posts
    Member since:
    Apr 2014

    Posted 02 Jun 2014 in reply to rick Link to this post

    I think the demos are pretty much the same, the information is in the model as well and also in the dataItem, but the way to reach it is a bit different. you could add a select function to the autocomplete to get some information.

    select: function(e){
    var dataItem = this.dataItem(e.item.index()),
           grid     = $("#grid").data("kendoGrid"),
           row      = this.wrapper.closest("tr"),
           model    = grid.dataItem(row);
    }
    http://demos.telerik.com/kendo-ui/autocomplete/template
  7. rick
    rick avatar
    6 posts
    Member since:
    May 2014

    Posted 02 Jun 2014 Link to this post

    Thanks for the feedback.  Although I understand your suggestion works, I believe it's a workaround.  I have implemented such a solution as you suggest, but I have to create a custom directive wrapper to work around this limitation.  I believe having such ability should be built into the autocomplete directive (most, if not all, angular directives are written to support this capability).  So I was wondering if there are any plans to support such a feature in the near future.
  8. con_ssc
    con_ssc avatar
    87 posts
    Member since:
    Apr 2014

    Posted 02 Jun 2014 in reply to rick Link to this post

    I really have very limited knowledge in angular, but maybe this helps a bit.

    Angular-Kendo.js / AutoComplete widget
  9. rick
    rick avatar
    6 posts
    Member since:
    May 2014

    Posted 02 Jun 2014 Link to this post

    No problem Stefan.  Yeah, I have looked at the examples on that site and it wasn't helpful.  If you look the docs for the DatePicker widget, you will see that it supports something like what I'm mentioning, except it uses the k-ng-model for the binding to the date object.  Maybe something like that can be done for the autocomplete.
  10. Mihai
    Admin
    Mihai avatar
    153 posts

    Posted 03 Jun 2014 Link to this post

    Hello,

    k-ng-model binds to whatever the widget's value() method returns, while ng-model binds to the input field's value attribute (which is usual with Angular).

    Now it happens that AutoComplete's value() method returns the string value of the field.  (See the code, which calls _accessor leading here).  Unfortunately there's no easy fix -- if we make it return the data object instead that would be an incompatible change.

    There is a related issue on Github, but I didn't yet decide what's the best fix.  Please feel free to add your voice there.

    For the time being, the workaround is to use k-on-select.  The event receives an item from which you can fetch the data object, something like this:

    <!-- in HTML -->
    <input kendo-auto-complete k-on-select="onSelect(kendoEvent)" ... />

    // in controller
    $scope.onSelect = function(ev) {
        var item = ev.item;
        var widget = ev.sender;
        var model = widget.dataItem(item);
    };

    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!
     
  11. rick
    rick avatar
    6 posts
    Member since:
    May 2014

    Posted 05 Jun 2014 in reply to Mihai Link to this post

    thanks for the response mihai.  yeah, i'm aware that an easy solution doesn't quite exist.  otherwise this would be a non-issue.  just a thought, i noticed in your docs that the kendo ui controls supports mvvm databinding, maybe we can tap into that capability somehow for angular?  here's your demo page that shows this in action:

    http://demos.telerik.com/kendo-ui/mvvm/widgets
  12. Mihai
    Admin
    Mihai avatar
    153 posts

    Posted 06 Jun 2014 Link to this post

    Hi Rick,

    Kendo MVVM provides overlapping functionality and cannot be used with Angular-Kendo.  On the other hand, even with Kendo MVVM you'd still get in your model whatever the widget's value() returns, which in the case of AutoComplete is just the string contents of the field -- so it wouldn't solve your problem.

    Using the "select" event is currently the best solution I can think of.

    Regards,
    Mihai
    Telerik
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  13. JH
    JH avatar
    12 posts
    Member since:
    Jul 2008

    Posted 23 Jun 2015 in reply to Mihai Link to this post

    Hi. Has this issued been "resolved" in later versions of Kendo UI, i.e. is there a better way of binding the data item to an angular scope than using k-on-select?

  14. Answer
    Petyo
    Admin
    Petyo avatar
    2439 posts

    Posted 25 Jun 2015 Link to this post

    Hello,

    with the introduction of data-value-primitive concept, this is possible - check an example.

    Regards,
    Petyo
    Telerik
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  15. rick
    rick avatar
    6 posts
    Member since:
    May 2014

    Posted 25 Jun 2015 Link to this post

    This is great news.  Thanks
  16. Peter
    Peter avatar
    1 posts
    Member since:
    Jul 2015

    Posted 25 Jul 2015 in reply to Petyo Link to this post

    Hi Petyo,

    I checked your example and tried to apply it to my use case where a person object references a country object:

    var person = { ..., country: { id: 1, name: "Italy" } } 

    but this doesn't work. When I instead reference an array like: 

    var person = { ..., country: [{ id: 1, name: "Italy" }] }  

    then it works (see http://dojo.telerik.com/OQAHE/8) but it does change my model. Can you tell me if there is a solution?

     

  17. Petyo
    Admin
    Petyo avatar
    2439 posts

    Posted 27 Jul 2015 Link to this post

    Hello Peter,

    the AutoComplete widget always expects an array as the value of k-ng-model, so I am afraid that there is no means to work around that.

    Regards,
    Petyo
    Telerik
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
Back to Top
Kendo UI is VS 2017 Ready