AngularJs k-auto-bind not working properly

[Andrew]

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!

[Kiril Nikolov]

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

 

 

[Andrew]

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!

[Kiril Nikolov]

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

 

 

[Gabbi]

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 ?

[Kiril Nikolov]

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

 

 

[Gabbi]

Look here:

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

it works only for auto-bind=false​

[Kiril Nikolov]

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