| title | page_title | description | slug | canonicalLink | position |
|---|---|---|---|---|---|
Templates |
Templates - DropDownList - Kendo UI for Vue |
Customize the content of the suggested list items and the suggested list elements of a Kendo UI DropDownList wrapper for Vue. |
templates_dropdownlist_wrapper |
8 |
The DropDownList provides full control over the way an item or a popup header is rendered by using the Kendo UI templates.
The item template manages the way the list DropDownList items are rendered.
{% meta height:350 %} {% embed_file dropdownlist/templates/basic/main.vue preview %} {% embed_file dropdownlist/templates/basic/main.js %} {% endmeta %}
The header template manages the way the popup header of the DropDownList is rendered.
{% meta height:350 %} {% embed_file dropdownlist/templates/header/main.vue preview %} {% embed_file dropdownlist/templates/header/main.js %} {% endmeta %}
The footer template manages the way the popup footer of the DropDownList is rendered. The footer is re-rendered on every change of the Data Source. The context of the template is the component itself.
{% meta height:350 %} {% embed_file dropdownlist/templates/footer/main.vue preview %} {% embed_file dropdownlist/templates/footer/main.js %} {% endmeta %}
The no-data template displays a noDataTemplate template in the popup when the data source is empty.
When the
noDataTemplateoption is defined, the component always opens the popup element.
{% meta height:350 %} {% embed_file dropdownlist/templates/no-data/main.vue preview %} {% embed_file dropdownlist/templates/no-data/main.js %} {% endmeta %}