un-lucky un-lucky -4 years ago 119
HTML Question

Hide headerTemplate of kendoMultiSelect

I have to use a

kendo-multi-select
control with check boxes in the UI, for that I have used template binding like the following:

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


Where
kMultiSelect
is the id of the html
<select>
. I got the customized UI as like this, Please note the portion that I have rounded with an yellow mark in the imageimage.

Actually my client doesn't need to show those selected items in the header, he just wanted a comboBox with multi selection checkboxes. How can I exclude that option from
kendoMultiSelect
, is that possible?

Answer Source

If you want to hide all selected items from view, you can hide the #multiselect_taglist e.g.

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

Dojo example to demonstrate hiding the header items.

Another option is to show a count of the items selected which can be achieved using tagMode

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

Dojo example to demonstrate tagMode in use.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download