DropDownList

Example

Razor
<kendo-dropdownlist>
    <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>
    <virtual />
</kendo-dropdownlist>

ChildTags

Attributes

AttributeTypeDescription
nameStringSets the name of the component.
as-moduleBooleanSpecifies whether the initialization script of the component will be rendered as a JavaScript module.
is-in-client-templateBooleanWhen placing a Tag Helper within a Kendo Template, set the type to text/html and add the is-in-client-template="true" attribute.
adaptive-modeAdaptiveModeSpecifies the adaptive rendering of the component.
bind-toIEnumerable<Object>The collection of data items which the data source contains.
datasource-idStringThe data source id
deferredBooleanSuppress initialization script rendering. Note that this options should be used in conjunction with DeferredScripts method.
adaptive-subtitleStringAllows customization of the subtitle's text in the adaptive view of the component.
adaptive-titleStringAllows customization of the title's text in the adaptive view of the component.
auto-bindBooleanControls whether to bind the widget to the data source on initialization.
auto-widthBooleanIf set to true, the widget automatically adjusts the width of the popup element and does not wrap up the item label.
cascade-fromStringUse it to set the Id of the parent DropDownList widget.Help topic showing how cascading functionality works
cascade-from-fieldStringDefines the field to be used to filter the data source. If not defined the parent's dataValueField option will be used.Help topic showing how cascading functionality works
cascade-from-parent-fieldStringDefines the parent field to be used to retain value from. This value will be used further to filter the dataSource. If not defined the value from the parent's dataValueField will be used.
datatextfieldStringThe field of the data item that provides the text content of the list items. The widget will filter the data source based on this field.
datavaluefieldStringThe field of the data item that provides the value of the widget.
delayDoubleSpecifies the delay in milliseconds before the search-text typed by the end user is sent for filtering.
enableBooleanIf 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-lengthBooleanIf 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-modeFillModeSets a value controlling how the color is applied.
filterFilterTypeWhen filtering is enabled, allows custom title to be defined for the filter input element.
filter-titleStringWhen filtering is enabled, allows custom title to be defined for the filter input element.
fixed-group-templateStringThe template used to render the fixed header group. By default the widget displays only the value of the current group.
fixed-group-template-handlerStringThe 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-idStringThe 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-viewIHtmlContentThe 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-templateStringThe 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-handlerStringThe 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-idStringThe 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-viewIHtmlContentThe 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.
forModelExpressionAn expression to be evaluated against the current model.
group-templateStringThe template used to render the groups. By default the widget displays only the value of the group.
group-template-handlerStringThe 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-idStringThe 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-viewIHtmlContentThe 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-templateStringSpecifies a static HTML content, which will be rendered as a header of the popup element.
header-template-handlerStringSpecifies 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-idStringSpecifies 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-viewIHtmlContentSpecifies a static HTML content, which will be rendered as a header of the popup element. This option expects the instance containing the created HTML.
heightDoubleThe height of the suggestion popup in pixels. The default value is 200 pixels.
ignore-caseBooleanIf set to false case-sensitive search will be performed to find suggestions. The widget performs case-insensitive searching by default.
indexDoubleThe index of the initially selected item. The index is 0 based.
min-lengthDoubleThe minimum number of characters the user must type before a filter is performed. Set to higher value than 1 if the search could match a lot of items.
no-data-templateStringThe 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-handlerStringThe 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-idStringThe 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-viewIHtmlContentThe 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-cascadeStringThe name of the JavaScript function that will handle the cascade event. Fired when the value of the widget is changed via API or user interaction.
on-changeStringThe name of the JavaScript function that will handle the change event. Fired when the value of the widget is changed by the user. As of 2015 Q3 SP1 cascading widget will trigger change event when its value is changed due to parent update.The event handler function context (available via the this keyword) will be set to the widget instance.
on-closeStringThe 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-boundStringThe 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-filteringStringThe 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-openStringThe 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-selectStringThe name of the JavaScript function that will handle the select event. Fired when an item from the popup is selected by the user either with mouse/tap or with keyboard navigation.
option-labelStringDefine the text of the default empty item. If the value is an object, then the widget will use it as a valid data item. Note that the optionLabel will not be available if the widget is empty.
option-label-templateStringThe template used to render the option label. Use optionLabelTemplate if you want to customize the markup of the optionLabel.
option-label-template-handlerStringThe template used to render the option label. Use optionLabelTemplate if you want to customize the markup of the optionLabel. This option expects the name of a JavaScript function that will be called to return the template.
option-label-template-idStringThe template used to render the option label. Use optionLabelTemplate if you want to customize the markup of the optionLabel. This option expects the ID of the script element that contains the template.
option-label-template-viewIHtmlContentThe template used to render the option label. Use optionLabelTemplate if you want to customize the markup of the optionLabel. This option expects the instance containing the created HTML.
readonlyBooleanIf 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.
roundedRoundedSets a value controlling the border radius.
script-attributesIDictionary<String,Object>Sets the attributes that will be added to the script tag of the component's initialization script.
sizeComponentSizeSets the size of the component.
templateStringThe template used to render the items. By default the widget displays only the text of the data item (configured via dataTextField).
template-handlerStringThe template used to render the items. By default the widget displays only the text of the data item (configured via dataTextField). This option expects the name of a JavaScript function that will be called to return the template.
template-idStringThe template used to render the items. By default the widget displays only the text of the data item (configured via dataTextField). This option expects the ID of the script element that contains the template.
template-viewIHtmlContentThe template used to render the items. By default the widget displays only the text of the data item (configured via dataTextField). This option expects the instance containing the created HTML.
textStringThe text of the widget used when the autoBind is set to false.
valueStringThe valueTemplate used to render the selected value. By default the widget displays only the text of the data item (configured via dataTextField).
value-primitiveBooleanSpecifies the value binding behavior for the widget when the initial model value is null. If set to true, the View-Model field will be updated with the primitive value of the selected item's field (defined in the dataValueField option).if set to false, the View-Model field will be updated with the selected item - the entire non-primitive object.
value-templateStringThe valueTemplate used to render the selected value. By default the widget displays only the text of the data item (configured via dataTextField).
value-template-handlerStringThe valueTemplate used to render the selected value. By default the widget displays only the text of the data item (configured via dataTextField). This option expects the name of a JavaScript function that will be called to return the template.
value-template-idStringThe valueTemplate used to render the selected value. By default the widget displays only the text of the data item (configured via dataTextField). This option expects the ID of the script element that contains the template.
value-template-viewIHtmlContentThe valueTemplate used to render the selected value. By default the widget displays only the text of the data item (configured via dataTextField). This option expects the instance containing the created HTML.
In this article
ExampleChildTagsAttributes
Not finding the help you need?
Contact Support