Custom Binder for comma separated value not working

[Christian]

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!

[Christian]

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

 

[Dimitar]

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