Edit this page

Use MultiSelect as CSV Editor

The following example demonstrates how to implement custom binding and use it for the MultiSelect to edit a string field that contains a list of comma-separated values.

Example
    <div id="grid"></div>
    <script>
      kendo.data.binders.widget.commaseparatedvalue = kendo.data.Binder.extend({
        init: function (widget, bindings, options) {
          kendo.data.Binder.fn.init.call(this, widget.element[0], bindings, options);
          this.widget = widget;
          this._change = $.proxy(this.change, this);
          this.widget.bind("change", this._change);
        },
        refresh: function () {
          var value = this.bindings.commaseparatedvalue.get();
          var values = value ? value.split(",") : [];

          this.widget.value(values);
        },
        change: function () {
          var value = this.widget.value();
          this.bindings.commaseparatedvalue.set(value.join(","));
        },
        destroy: function () {
          this.widget.unbind("change", this._change);
        }
      });

      var dataSource = new kendo.data.DataSource({
        data: [{ID: 1, Value: "Value1,Value2"}, { ID: 2, Value: "Value2,Value3"}],
        schema: {
          model: {
            id: "ID",
            fields: {
              ID: { editable: false, type: "number" },
              Value: { type: "string" }                                                 
            }
          }
        }
      });

      $("#grid").kendoGrid({
        dataSource: dataSource,
        columns: [
          "ID",
          { field: "Value", editor: multiselectEditor},
          { command: ["edit"], title: "&nbsp;"}],
        editable: "inline"
      });

      function multiselectEditor(container, options) {
        $("<select data-bind='commaseparatedvalue: " + options.field + "'/>").appendTo(container).kendoMultiSelect({
          dataSource: ["Value1", "Value2", "Value3"]
        });
      }

    </script>

See Also

For more runnable examples on the Kendo UI Grid, browse its How To documentation folder.

Is this article helpful? Yes / No
Thank you for your feedback!

Give article feedback

Tell us how we can improve this article

close
Dummy