New to Kendo UI for jQuery? Download free 30-day trial

Use MultiSelect as Custom Editor in Grid

Environment

Product Progress Kendo UI Grid
Operating System All
Browser All
Browser Version All

Description

How can I use the Kendo UI MultiSelect as an editor for comma-separated string fields in the Kendo UI Grid for jQuery?

Solution

To enable the mobile view of the ToolBar widget:

  1. Create a custom binding for the MultiSelect editor that inherits from the kendo.data.Binder class. This is done via the extend method of the Binder.
  2. Declare the MultiSelect editor and pass is to the columns.editor

The following example demonstrates how to use the MultiSelect as a custom editor in the Grid.

    <div id="main">
      <div id="grid" data-bind="source: dataSource"></div>
    </div>
    <script>
        kendo.data.binders.widget.multiValue = kendo.data.Binder.extend({
          init: function(widget, bindings, options) {
              //call the base constructor
              kendo.data.Binder.fn.init.call(this, widget.element[0], bindings, options);

              this.widget = widget;
              this._change = $.proxy(this.change, this);
              this.widget.first("change", this._change);
              this._initChange = false;
          },

          refresh: function() {
            if (!this._initChange) {
              var widget = this.widget;
              var field = widget.options.dataValueField || widget.options.dataTextField;
              var value = this.bindings.multiValue.get() || null;
              var values = [];
              var selectedValue;

              if (field) {
                if (value instanceof kendo.data.ObservableArray) {
                  for (var idx = 0; idx < value.length; idx++) {
                    selectedValue = value[idx];
                    values[idx] = selectedValue.get ? selectedValue.get(field) : selectedValue;
                  }
                  value = values;
                }
              } else {
                values = value;
              }

              widget.value(values);
            }
          },

          change: function() {
            var widget = this.widget;
            var value = widget.options.valuePrimitive ? widget.value() : widget.dataItems();

            this._initChange = true;
            this.bindings.multiValue.set(value);
            this._initChange = false;
          }
      });
    </script>
    <script>
      (function () {
      var multiSelectEditor = function (container, options) {
          $('<select data-bind="multiValue:' + options.field + '"/>')
              .appendTo(container)
              .kendoMultiSelect({
              suggest: true,
              dataSource: options.values,
              valuePrimitive: true
          });
      };

      var singleSelectEditor = function (container, options) {
          $('<input data-bind="value:' + options.field + '"/>')
              .appendTo(container)
              .kendoDropDownList({
              suggest: true,
              dataSource: ['Canada', 'Mexico', 'United States']
          });
      };

      var numericEditor = function (container, options) {
          $('<input data-bind="value:' + options.field + '"/>')
              .appendTo(container)
              .kendoNumericTextBox({
              decimals: 2,
              min: 0,
              format: 'c2'
          });
      };

      var multiSelectArrayToString = function (item) {
          return item.countries.join(', ');
      };

      var vm = kendo.observable({
          countries: ['Canada', 'Mexico', 'United States'],
          dataSource: new kendo.data.DataSource({
              data: [{
                  id: 1,
                  product: 'X002',
                  countries: ['Mexico', 'Canada'],
                  country: 'Mexico',
                  price: 0.98
              }, {
                  id: 2,
                  product: 'X036',
                  countries: ['United States'],
                  country: 'Mexico',
                  price: 2.96
              }, {
                  id: 3,
                  product: 'X098',
                  countries: [],
                  country: '',
                  price: 45.90
              } ],
              schema: {
                  model: {
                      id: 'id',
                      fields: {
                          'id': {
                              type: 'number'
                          },
                              'product': {
                              type: 'string'
                          },
                            'country': {
                              type: 'string'
                          },
                              'countries': {},
                              'price': {
                              type: 'number'
                          }
                      }
                  }
              }
          }),
      });

      $('#grid').kendoGrid({
          columns: [{
              field: 'product'
          }, {
              field: 'countries',
              editor: multiSelectEditor, // function that generates the multiSelect control
              values: vm.countries, // custom property with array of values
              template: multiSelectArrayToString // template: how to display text in grid
          }, {
              field: 'country',
              editor: singleSelectEditor // function that generates the multiSelect control
          }, {
              field: 'price',
              editor: numericEditor,
              format: '{0:c}'
          }],
          editable: 'incell',
          save: function(e){
              console.log("save it", e);
          }
      });

      kendo.bind('#main', vm);

    })()
    </script>

See Also

In this article