Kendo UI grid popup edit custom template - Add a multi-select control

Question

I'm using custom popup editor template for the edit popup option of the grid:

editable: { mode: "popup",
    template: $("#popup_editor").html()
      },

<!-- popup editor template -->
    <script id="popup_editor" type="text/x-kendo-template">
            template
            </script>

There requirements for the template have a few multi-select controls that are not in the grid, the summary of what the user selects in these multi-select controls is what determines a "summary" field in the grid. Ex:

(multi-select1) color: red, blue, purple --- not a field in grid (multi-select2) size: xs, s --- not a field in grid

Summary: color="red, blue, purple" ; size="xs, s" --- field shown in grid

Question is: how can i add the multi-select in the edit popup custom template?

Answer 1

You can specify a custom editor function for a field using columns definition , It will work even for the popup editing mode.

columns: [ {
    field: "name",
    editor: function(container, options) {
     // create an input element
     var select= $("<select/>");
     // set its name to the field to which the column is bound ('name' in this case)
     select.attr("name", options.field);
     select.appendTo(container);
     select.kendoMultiSelect({ 
     dataSource: {
        data: ["red", "blue"]
       }    
     });
    }
  } ],