AngularJs k-auto-bind not working properly

8 posts, 0 answers
  1. tom
    tom avatar
    13 posts
    Member since:
    Nov 2013

    Posted 24 Oct 2014 Link to this post

    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!


























  2. Kiril Nikolov
    Admin
    Kiril Nikolov avatar
    2564 posts

    Posted 27 Oct 2014 Link to this post

    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!
     
  3. Kendo UI is VS 2017 Ready
  4. tom
    tom avatar
    13 posts
    Member since:
    Nov 2013

    Posted 27 Oct 2014 in reply to Kiril Nikolov Link to this post

    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!
  5. Kiril Nikolov
    Admin
    Kiril Nikolov avatar
    2564 posts

    Posted 28 Oct 2014 Link to this post

    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!
     
  6. Gabbi
    Gabbi avatar
    3 posts
    Member since:
    Jan 2015

    Posted 09 Aug 2015 in reply to Kiril Nikolov Link to this post

    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 ?

  7. Kiril Nikolov
    Admin
    Kiril Nikolov avatar
    2564 posts

    Posted 11 Aug 2015 Link to this post

    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!
     
  8. Gabbi
    Gabbi avatar
    3 posts
    Member since:
    Jan 2015

    Posted 11 Aug 2015 in reply to Kiril Nikolov Link to this post

    Look here:

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

    it works only for auto-bind=false​

  9. Kiril Nikolov
    Admin
    Kiril Nikolov avatar
    2564 posts

    Posted 12 Aug 2015 Link to this post

    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!
     
Back to Top
Kendo UI is VS 2017 Ready