MultiSelect

Example

Razor

<kendo-multiselect>
    <datasource></datasource>
    <fixed-group-template></fixed-group-template>
    <footer-template></footer-template>
    <group-template></group-template>
    <header-template></header-template>
    <item-template></item-template>
    <label />
    <messages />
    <no-data-template></no-data-template>
    <popup></popup>
    <popup-animation></popup-animation>
    <prefix-options></prefix-options>
    <suffix-options></suffix-options>
    <tag-template></tag-template>
    <virtual />
</kendo-multiselect>

ChildTags

Tag Name	Details
datasource	DataSourceTagHelper
fixed-group-template	TemplateTagHelper
footer-template	TemplateTagHelper
group-template	TemplateTagHelper
header-template	TemplateTagHelper
item-template	TemplateTagHelper
label	MultiSelectLabelSettingsTagHelper
messages	MultiSelectMessagesSettingsTagHelper
no-data-template	TemplateTagHelper
popup	MultiSelectPopupSettingsTagHelper
popup-animation	MultiSelectAnimationSettingsTagHelper
prefix-options	MultiSelectPrefixOptionsSettingsTagHelper
suffix-options	MultiSelectSuffixOptionsSettingsTagHelper
tag-template	TemplateTagHelper
virtual	MultiSelectVirtualSettingsTagHelper

Attributes

Attribute	Type	Description
name	String	Sets the name of the component.
adaptive-subtitle	String	Allows customization of the subtitle's text in the adaptive view of the component.
adaptive-title	String	Allows customization of the title's text in the adaptive view of the component.
deferred	Boolean	Suppress initialization script rendering. Note that this options should be used in conjunction with DeferredScripts method.
adaptive-mode	AdaptiveMode	Specifies the adaptive rendering of the component.
as-module	Boolean	Specifies whether the initialization script of the component will be rendered as a JavaScript module.
auto-width	Boolean	If set to true, the widget automatically adjusts the width of the popup element and does not wrap up the item label.
is-in-client-template	Boolean	When placing a Tag Helper within a Kendo Template, set the type to text/html and add the is-in-client-template="true" attribute.
auto-bind	Boolean	Controls whether to bind the widget to the data source on initialization.
auto-close	Boolean	Controls whether to close the widget suggestion list on item selection.
bind-to	IEnumerable<Object>	The collection of data items which the data source contains.
checkboxes	Boolean	When set to true, renders a checkbox next to each item in the dropdown list. Works in conjunction with the selectAll option to provide a fully checkbox-driven multi-selection experience.
clear-button	Boolean	Unless this options is set to false, a button will appear when hovering the widget. Clicking that button will reset the widget's value and will trigger the change event.
datasource-id	String	The data source id
datatextfield	String	The field of the data item used when searching for suggestions. This is the text that will be displayed in the list of matched results.
datavaluefield	String	The field of the data item used when searching for suggestions. This is the value that will be displayed in the list of matched results.
delay	Double	Specifies the delay in milliseconds after which the MultiSelect will start filtering dataSource.
down-arrow	Boolean	Configures MultiSelect to render a down arrow that opens and closes its popup.
enable	Boolean	If set to false the widget will be disabled and will not allow user input. The widget is enabled by default and allows user input.
enforce-min-length	Boolean	If set to true the widget will not show all items when the text of the search input cleared. By default the widget shows all items when the text of the search input is cleared. Works in conjunction with minLength.
fill-mode	FillMode	Sets a value controlling how the color is applied.
filter	FilterType	The filtering method used to determine the suggestions for the current value.
fixed-group-template	String	The template used to render the fixed header group. By default the widget displays only the value of the current group.
fixed-group-template-handler	String	The template used to render the fixed header group. By default the widget displays only the value of the current group. This option expects the name of a JavaScript function that will be called to return the template.
fixed-group-template-id	String	The template used to render the fixed header group. By default the widget displays only the value of the current group. This option expects the ID of the script element that contains the template.
fixed-group-template-view	IHtmlContent	The template used to render the fixed header group. By default the widget displays only the value of the current group. This option expects the instance containing the created HTML.
footer-template	String	The template used to render the footer template. The footer template receives the widget itself as a part of the data argument. Use the widget fields directly in the template.
footer-template-handler	String	The template used to render the footer template. The footer template receives the widget itself as a part of the data argument. Use the widget fields directly in the template. This option expects the name of a JavaScript function that will be called to return the template.
footer-template-id	String	The template used to render the footer template. The footer template receives the widget itself as a part of the data argument. Use the widget fields directly in the template. This option expects the ID of the script element that contains the template.
footer-template-view	IHtmlContent	The template used to render the footer template. The footer template receives the widget itself as a part of the data argument. Use the widget fields directly in the template. This option expects the instance containing the created HTML.
for	ModelExpression	An expression to be evaluated against the current model.
group-template	String	The template used to render the groups. By default the widget displays only the value of the group.
group-template-handler	String	The template used to render the groups. By default the widget displays only the value of the group. This option expects the name of a JavaScript function that will be called to return the template.
group-template-id	String	The template used to render the groups. By default the widget displays only the value of the group. This option expects the ID of the script element that contains the template.
group-template-view	IHtmlContent	The template used to render the groups. By default the widget displays only the value of the group. This option expects the instance containing the created HTML.
header-template	String	Specifies a static HTML content, which will be rendered as a header of the popup element.
header-template-handler	String	Specifies a static HTML content, which will be rendered as a header of the popup element. This option expects the name of a JavaScript function that will be called to return the template.
header-template-id	String	Specifies a static HTML content, which will be rendered as a header of the popup element. This option expects the ID of the script element that contains the template.
header-template-view	IHtmlContent	Specifies a static HTML content, which will be rendered as a header of the popup element. This option expects the instance containing the created HTML.
height	Double	The height of the suggestion popup in pixels. The default value is 200 pixels.
highlight-first	Boolean	If set to true the first suggestion will be automatically highlighted.
ignore-case	Boolean	If set to false case-sensitive search will be performed to find suggestions. The widget performs case-insensitive searching by default.
input-mode	String	Specifies the inputmode attribute of the inner <input /> element. It is used to specify the type of on-screen keyboard that should be displayed when the user focuses the input.
item-template	String	The template used to render the items in the popup list.
item-template-handler	String	The template used to render the items in the popup list. This option expects the name of a JavaScript function that will be called to return the template.
item-template-id	String	The template used to render the items in the popup list. This option expects the ID of the script element that contains the template.
item-template-view	IHtmlContent	The template used to render the items in the popup list. This option expects the instance containing the created HTML.
max-selected-items	Double	Defines the limit of the selected items. If set to null widget will not limit number of the selected items.
min-length	Double	The minimum number of characters the user must type before a search is performed. Set to a higher value if the search could match a lot of items. A zero value means that a request will be made as soon as the user focuses the widget.
no-data-template	String	The template used to render the "no data" template, which will be displayed if no results are found or the underlying data source is empty. The noData template receives the widget itself as a part of the data argument. The template will be evaluated on every widget data bound.
no-data-template-handler	String	The template used to render the "no data" template, which will be displayed if no results are found or the underlying data source is empty. The noData template receives the widget itself as a part of the data argument. The template will be evaluated on every widget data bound. This option expects the name of a JavaScript function that will be called to return the template.
no-data-template-id	String	The template used to render the "no data" template, which will be displayed if no results are found or the underlying data source is empty. The noData template receives the widget itself as a part of the data argument. The template will be evaluated on every widget data bound. This option expects the ID of the script element that contains the template.
no-data-template-view	IHtmlContent	The template used to render the "no data" template, which will be displayed if no results are found or the underlying data source is empty. The noData template receives the widget itself as a part of the data argument. The template will be evaluated on every widget data bound. This option expects the instance containing the created HTML.
on-change	String	The name of the JavaScript function that will handle the change event. Fired when the value of the widget is changed by the user.The event handler function context (available via the this keyword) will be set to the widget instance.
on-close	String	The name of the JavaScript function that will handle the close event. Fired when the popup of the widget is closed.The event handler function context (available via the this keyword) will be set to the widget instance.
on-data-bound	String	The name of the JavaScript function that will handle the dataBound event. Fired when the widget is bound to data from its data source.The event handler function context (available via the this keyword) will be set to the widget instance.
on-deselect	String	The name of the JavaScript function that will handle the deselect event. Fired when an item is deselected or tag is removed.
on-filtering	String	The name of the JavaScript function that will handle the filtering event. Fired when the widget is about to filter the data source.The event handler function context (available via the this keyword) will be set to the widget instance.
on-kendo-keydown	String	The name of the JavaScript function that will handle the kendoKeydown event. Triggered when the user presses a keyboard key while the MultiSelect is focused.The event handler function context (available via the this keyword) will be set to the widget instance.
on-open	String	The name of the JavaScript function that will handle the open event. Fired when the popup of the widget is opened by the user.The event handler function context (available via the this keyword) will be set to the widget instance.
on-select	String	The name of the JavaScript function that will handle the select event. Fired when an item from the popup is selected by the user.
on-select-all-change	String	The name of the JavaScript function that will handle the selectAllChange event. Fired when the user clicks the "Select all" header item or activates it via keyboard. The event is preventable — calling e.preventDefault() cancels the built-in select/deselect-all logic so the application can implement its own (for example, fetching and selecting all records from a remote data source).The event handler function context (available via the this keyword) will be set to the widget instance.
placeholder	String	The hint displayed by the widget when it is empty. Not set by default.
readonly	Boolean	If set to true, the widget will be readonly and will not allow user input. The widget is not readonly be default and allow user input.
rounded	Rounded	Sets a value controlling the border radius.
script-attributes	IDictionary<String,Object>	Sets the attributes that will be added to the script tag of the component's initialization script.
select-all	Boolean	When set to true, renders a sticky "Select all" header at the top of the dropdown list. Clicking it selects all currently rendered items. When checkboxes is also enabled, the header shows a checkbox that reflects the aggregate selection state: unchecked (none selected), indeterminate (some selected), or checked (all selected).The built-in click behavior can be overridden by handling the preventable selectAllChange event.
size	ComponentSize	Sets the size of the component.
summarize-after	Double	When set to a number, the tag list switches to a summarized display once the number of selected items reaches or exceeds that threshold. The first summarizeAfter items are rendered as individual tags, and the remaining items are collapsed into a single overflow chip showing the count (e.g. "+5 item(s) selected"). When set to null (the default), all selected items are always rendered as individual tags unless tagMode is set to "single".
tag-mode	String	The mode used to render the selected tags. The available modes are: - multiple - renders a tag for every selected value - single - renders only one tag that shows the number of the selected values
tag-template	String	The template used to render the tags.
tag-template-handler	String	The template used to render the tags. This option expects the name of a JavaScript function that will be called to return the template.
tag-template-id	String	The template used to render the tags. This option expects the ID of the script element that contains the template.
tag-template-view	IHtmlContent	The template used to render the tags. This option expects the instance containing the created HTML.
value	IEnumerable	Sets the value of the widget.
value-primitive	Boolean	Specifies the value binding behavior for the widget. If set to true, the View-Model field will be updated with the selected item value field. If set to false, the View-Model field will be updated with the selected item.