隐藏 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，请注意我在图像中用黄色标记四舍五入的部分。

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

Answer 1

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

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

您还可以使用CSS隐藏所有多选控件的#multiselect-taglist（如@Shia所建议）：

#multiselect_taglist {
  display: none;
}

Dojo example 演示隐藏 header 项。

另一个选项是显示所选项目的数量，这可以使用 tagMode

来实现

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

Dojo example 演示 tagMode 的使用。

Answer 2

您可以使用 CSS 在 header 中隐藏所选项目：

#multiselect_taglist {
  display: none;
}

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

隐藏 kendoMultiSelect 的 headerTemplate

Hide headerTemplate of kendoMultiSelect

javascript

jquery

html

kendo-ui

kendo-multiselect