隐藏 kendoMultiSelect 的 headerTemplate

Question

我必须在 UI 中使用带有复选框的 kendo-multi-select 控件，因为我使用了如下模板绑定：

$("#kMultiSelect").kendoMultiSelect({
   animation: false,
   autoClose: false,
   itemTemplate: "<input type='checkbox'/><span> #: data #</span>",
   dataSource: {
   data: ["Short item", "An item with really", "really long", 
           "text","six","seven","SSSS"]
  },
});

其中kMultiSelect 是html <select> 的id。我得到了这样的自定义 UI，请注意我在图像 中用黄色标记四舍五入的部分。

实际上我的客户不需要在标题中显示那些选定的项目，他只想要一个带有多选复选框的组合框。如何从kendoMultiSelect 中排除该选项，这可能吗？

Answer 1

您可以使用 CSS 从标题中隐藏所选项目：

#multiselect_taglist {
  display: none;
}

要改为显示所选项目的数量，请像 Sandman 建议的那样使用 tagMode: "single"。

Answer 2

如果您想有条件地从视图中隐藏所有选定的项目，您可以隐藏#multiselect_taglist 例如

var header = $("#multiselect_taglist");
header.hide();

或者，您还可以使用 CSS 来隐藏 all 多选控件的 #multiselect-taglist（如 @Shia 所建议的那样）：

#multiselect_taglist {
  display: none;
}

Dojo example 演示隐藏标题项。

另一个选项是显示可以使用tagMode 实现的所选项目的计数

$("#multiselect").kendoMultiSelect({
  ...    
  tagMode: "single"    
});   

Dojo example 演示 tagMode 正在使用中。