Custom Binder for comma separated value not working

3 posts, 0 answers
  1. Christian
    Christian avatar
    38 posts
    Member since:
    Jul 2014

    Posted 08 Jan 2018 Link to this post

    Hi,

     

    I want to use a multiselect widget inside of a grid. The applicaton is Angular 1.6 with typescript.

    The model consists of a comma separated string.

     

    Problem: the widget is opened and initialized with the correct values. But when I change the widget these modifications do not update the model.

     

    This is what I've got so far:

    module kendo.data.binders.widget {
        export class commaseparatedvalue extends kendo.data.Binder {
     
            init(widget, bindings, options) {
                kendo.data.Binder.fn.init.call(this, widget.element[0], bindings, options);
            }
     
     
            refresh() {
                // this is called correctly!
                console.log("refresh", this.bindings, this.element);
                var that = this;
                var value = that.bindings["commaseparatedvalue"].get();
                var values = value ? value.split(",") : [];
                that.element.value(values);
            }
     
            change() {
                // this is not called
                console.log("change", this.bindings, this.element);
            }
     
     
     
        }
    }

     

     

    any help greatly appreciated!

     

    Thank you!

  2.
  3. Christian
    Christian avatar
    38 posts
    Member since:
    Jul 2014

    Posted 08 Jan 2018 in reply to Christian Link to this post

    I also tried to add the following inside the init:

     

                this._change = $.proxy(this.change, this);
                this.widget.bind("change", this._change);

     

    According to this documentation:

    https://docs.telerik.com/kendo-ui/controls/data-management/grid/how-to/Editing/using-mutiselect-editor-for-comma-separated-string

     

  5. Dimitar
    Admin
    Dimitar avatar
    712 posts

    Posted 10 Jan 2018 Link to this post

    Hello Christian,

    The preferred way to bind the change event is to use the bind method as follows:
    <script>
      kendo.data.binders.widget.commaseparatedvalue = kendo.data.Binder.extend({
        init: function(widget, bindings, options) {
          var that = this;
          kendo.data.Binder.fn.init.call(that, widget.element[0], bindings, options);
          this.widget = widget;
          this.widget.bind("change", that.change.bind(that));
        },
      })
    </script>

    Checkout the following Dojo example, where the above is demonstrated in action. You will notice that the change event is being correctly triggered and a message is being logged in the browser console.

    For additional information and examples on how to handle events for custom widgets, please refer to the following documentation article.

    Regards,
    Dimitar
    Progress Telerik
    Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
Back to Top