隐藏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隐藏所有多选控件的#multiselect-taglist（由@Shia建议）：

#multiselect_taglist {
  display: none;
}

Dojo example演示隐藏标题项。

另一种选择是显示使用tagMode

可以实现的所选项目的计数

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

Dojo example展示正在使用的tagMode。