This is a migrated thread and some comments may be shown as answers.

AngularJs k-auto-bind not working properly

7 Answers 433 Views
DropDownList
This is a migrated thread and some comments may be shown as answers.
Andrew
Top achievements
Rank 1
Andrew asked on 24 Oct 2014, 11:13 AM
I am having a few issues when attempting to bind dropdownlist items on click rather than on init. I am using the AngularJS directives and notice that k-auto-bind="false" is not working as expected. For one, it is ignored unless I manually add a "null" option within the select. Without this option it will bind on init and seemingly ignore the autobind attribute. More importantly, even when adding the option when autobind=false is working, it will not bind the ng-model on init. It will only bind when clicked. Is there no way to bind the model object's value without binding the drop down values??? I can't see any valid use case where somebody would not want the model to bind until clicked:

<select class="kendo-form-control"
        ng-model="ngModel"
        data-kendo-drop-down-list
        data-k-data-text-field="textField"
        data-k-data-value-field="valueField"
        data-k-data-source="datasource"
        data-k-auto-bind="false">
    <option value=null>Select an option...</option>
</select>

                            $scope.datasource = {
                                transport: {
                                    read: {
                                        url: myUrl,
                                        type: 'GET',
                                        dataType: 'json'
                                    },
                                },
                                schema: {                              
                                    data: function (data) {             
                                        var results = [];
                                        if (data.instances) {
                                            data.instances.forEach(function (instance) {
                                                var newInstance = angular.copy(instance);
                                                delete newInstance.properties;
                                                for (var prop in instance.properties) {
                                                    newInstance[prop] = instance.properties[prop];
                                                }
                                                results.push(newInstance);
                                            });
                                        }
                                        else {
                                            results = data;
                                        }
                                        return results;
                                    }
                                }
                            };
                        }   
Thanks!


























7 Answers, 1 is accepted

Sort by
0
Kiril Nikolov
Telerik team
answered on 27 Oct 2014, 12:42 PM
Hello Tom,

I have tried to reproduce the problem with the autoBind option in the following Kendo UI Dojo snippet, but to no avail. Can you please check it out and let me know if I missed something:

http://dojo.telerik.com/EbAZ

Regards,
Kiril Nikolov
Telerik
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
0
Andrew
Top achievements
Rank 1
answered on 27 Oct 2014, 02:37 PM
I'll recheck the issue with it ignoring auto-bind

However, is there a way to set the model to a specific value in your datasource? The biggest issue is that the ng-model value is not binding when auto-bind = false. So in your example, if "myModel" was a property that has a value already it will not display as the selected value until the drop down is bound.  Is this by design? I assumed that the model value should still be bound even if the drop down is not. Whereas its reasonable to not want to bind all potential drop down values on load, i'm not sure why anybody would not want to bind the model value if it exists?

Thanks!
0
Kiril Nikolov
Telerik team
answered on 28 Oct 2014, 12:24 PM
Hi Tom,

When you set ng-model to the widget the autoBind property will be ignored. Ng-model uses the widget value method and this behavior is documented here:

http://docs.telerik.com/kendo-ui/api/javascript/ui/dropdownlist#methods-value

Regards,
Kiril Nikolov
Telerik
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
0
Gabbi
Top achievements
Rank 1
answered on 09 Aug 2015, 09:08 AM

When using ng-model in a drop down list like this:

<select kendo-drop-down-list class="p-capacity-report-view-select"
k-data-text-field="'name'"
k-data-value-field="'id'"
k-data-source="viewsDataSource"
k-auto-bind="true"
ng-model="selectedView"
k-on-change="onClickView()"
k-template="itemTemplate"
k-value-template="valueTemplate"
/>

 

Trying to change the value of selectedViews will not effect the drop down.
Only by specificly writing: k-auto-bind="false", it will work.

 

Why ?

0
Kiril Nikolov
Telerik team
answered on 11 Aug 2015, 07:27 AM

Hello Gabbi,

Can you please create a simple example where the issue can be reproduced, and open a separate support request and we will be happy to take a look and advise you further.

Regards,
Kiril Nikolov
Telerik
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
0
Gabbi
Top achievements
Rank 1
answered on 11 Aug 2015, 07:50 AM

Look here:

http://dojo.telerik.com/aqoXo/3

it works only for auto-bind=false‚Äč

0
Kiril Nikolov
Telerik team
answered on 12 Aug 2015, 12:50 PM

Hello Gabbi,

 

In your case as you are using object values you need to use k-ng-model instead as it is optimized for working with JavaScript objects. And as you are setting primitive value, you need to use k-value-primitive as well. All this is explained here:

 

http://docs.telerik.com/kendo-ui/AngularJS/introduction

 

Here is the working example as well:

 

http://dojo.telerik.com/aqoXo/4

 

Regards,
Kiril Nikolov
Telerik
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
Tags
DropDownList
Asked by
Andrew
Top achievements
Rank 1
Answers by
Kiril Nikolov
Telerik team
Andrew
Top achievements
Rank 1
Gabbi
Top achievements
Rank 1
Share this question
or