Hide headerTemplate of kendoMultiSelect

Question

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 image.

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?

What do you want to be displayed in the combobox text area instead? — Shai, Jun 13 '17 at 09:24
@Shai: Anything else, no need of displaying that selected items with remove option, It would be great if display the selected items count — sujith karivelil, Jun 13 '17 at 09:26

score 4 · Accepted Answer · answered Jun 13 '17 at 09:51

4

You can hide the selected items from the header with CSS:

#multiselect_taglist {
  display: none;
}

To display the number of items selected instead, use tagMode: "single" like Sandman suggested.

answered Jun 13 '17 at 09:51

Shai

3,659
2
13
26

Thanks for the help – sujith karivelil Jun 13 '17 at 09:56

Sandman · Answer 2 · 2017-06-13T10:23:27.040

3

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

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

Optionally, you can also use CSS to hide the #multiselect-taglist for all multiselect controls (as suggested by @Shia):

#multiselect_taglist {
  display: none;
}

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.

edited Jun 13 '17 at 10:23

answered Jun 13 '17 at 09:42

Sandman

2,247
1
13
26

Perfect..! Thanks for the help – sujith karivelil Jun 13 '17 at 09:56
Good answer, especially the tagMode part! I would suggest avoiding using jQuery when there's another option, like using CSS. – Shai Jun 13 '17 at 09:58
@Shai good point, I updated the answer for completeness. The only scenario where I would disagree with this is when there is a requirement to conditionally hide/show the selected items. However, it seems like OP does not require this. – Sandman Jun 13 '17 at 10:25
Actually it would work the same as with jQuery, as with both you have to use a selector to find the element you want to affect. In both you'll use an additional id or class to narrow down the selection to the multiselect elements you want to affect, like `#area1 #multiselect` or `#multiselect.notaglist`. – Shai Jun 13 '17 at 10:29
Yes but perhaps I should have been more specific, "_conditional_" as in a specific scenario would require the items to be shown/not shown, for example hide when over a certain number of selected items. Anyway, this wasn't specified and OP has plenty of potential solutions to work with now. :) – Sandman Jun 13 '17 at 12:14

Hide headerTemplate of kendoMultiSelect

2 Answers2