Angular ngmodel binding to objects

[rick]

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

[CS]

I could be wrong but that seems to be the wrong link.

[CS]

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.

[rick]

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?

[CS]

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

[rick]

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.

[CS]

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

Angular-Kendo.js / AutoComplete widget

[rick]

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.

[Mihai]

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

 

 

[rick]

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

[Mihai]

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

 

 

[CCG]

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?

[Petyo]

Hello,

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

Regards,
Petyo
Telerik

 

 

[rick]

This is great news.  Thanks

[Peter]

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?

 

[Petyo]

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