javascript - Kendo UI 网格弹窗编辑自定义模板 - 添加多选控件

Question

我正在为网格的编辑弹出选项使用自定义弹出编辑器模板:

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

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

要求模板有一些不在网格中的多选控件，用户在这些多选控件中选择的内容的摘要决定了网格中的“摘要”字段。例如:

(multi-select1) color: red, blue, purple --- 不是网格中的字段(multi-select2) size: xs, s --- 不是网格中的字段

总结:color="red, blue, purple"; size="xs, s"--- 网格中显示的字段

问题是:如何在编辑弹出自定义模板中添加多选？

Answer 1

您可以使用 columns definition 为字段指定自定义编辑器功能, 它甚至适用于弹出编辑模式。

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"]
       }    
     });
    }
  } ],