Templates
The DropDownList provides full control over the rendering of items, selected values, and popup headers by using Kendo UI templates.
For a complete example, refer to the demo on customizing the DropDownList templates.
The DropDownList supports the following templates:
Item Templates
The item template manages the way the list items of a DropDownList are rendered.
<input id="dropdownlist" />
<!-- Template -->
<script id="scriptTemplate" type="text/x-kendo-template">
ContactName: #:data.ContactName#, CustomerID: #:data.CustomerID#
</script>
<!-- DropDownList initialization -->
<script>
$(document).ready(function() {
$("#dropdownlist").kendoDropDownList({
template: $("#scriptTemplate").html(),
dataTextField: "ContactName",
dataValueField: "CustomerID",
dataSource: {
transport: {
read: {
dataType: "jsonp",
url: "https://demos.telerik.com/kendo-ui/service/Customers"
}
}
}
});
});
</script>
Value Templates
The value template manages the way the selected value of a DropDownList is rendered.
Value templates must consist of inline HTML elements only.
<input id="dropdownlist" />
<!-- Template -->
<script id="valueTemplate" type="text/x-kendo-template">
ContactName: #:data.ContactName#
</script>
<!-- DropDownList initialization -->
<script>
$(document).ready(function() {
$("#dropdownlist").kendoDropDownList({
valueTemplate: $("#valueTemplate").html(),
dataTextField: "ContactName",
dataValueField: "CustomerID",
dataSource: {
transport: {
read: {
dataType: "jsonp",
url: "https://demos.telerik.com/kendo-ui/service/Customers"
}
}
}
});
});
</script>
Header Templates
The header template manages the way the popup header of a DropDownList is rendered.
<input id="dropdownlist" />
<!-- Template -->
<script id="headerTemplate" type="text/x-kendo-template">
<strong>Header</strong>
</script>
<!-- DropDownList initialization -->
<script>
$(document).ready(function() {
$("#dropdownlist").kendoDropDownList({
headerTemplate: $("#headerTemplate").html(),
dataTextField: "ContactName",
dataValueField: "CustomerID",
dataSource: {
transport: {
read: {
dataType: "jsonp",
url: "https://demos.telerik.com/kendo-ui/service/Customers"
}
}
}
});
});
</script>
Footer Templates
The footer template manages the way the popup footer of a DropDownList is rendered. The footer is re-rendered on every change of the Data Source. The context of the template is the widget itself.
<input id="dropdownlist" />
<!-- Template -->
<script id="footerTemplate" type="text/x-kendo-template">
Total <strong>#: instance.dataSource.total() #</strong> items found
</script>
<!-- DropDownList initialization -->
<script>
$(document).ready(function() {
$("#dropdownlist").kendoDropDownList({
footerTemplate: $("#footerTemplate").html(),
dataTextField: "ContactName",
dataValueField: "CustomerID",
dataSource: {
transport: {
read: {
dataType: "jsonp",
url: "https://demos.telerik.com/kendo-ui/service/Customers"
}
}
}
});
});
</script>
No-Data Templates
The DropDownList widget displays noDataTemplate in the popup when the data source is empty.
When the
noDataTemplateoption is defined, the DropDownList always opens the popup element.
<input id="dropDownList" />
<!-- Template -->
<script id="noDataTemplate" type="text/x-kendo-template">
<strong>No Data!</strong>
</script>
<!-- DropDownList initialization -->
<script>
$(document).ready(function() {
$("#dropDownList").kendoDropDownList({
noDataTemplate: $("#noDataTemplate").html(),
dataTextField: "ContactName",
dataValueField: "CustomerID",
dataSource: {
transport: {
read: {
dataType: "jsonp",
url: "https://demos.telerik.com/kendo-ui/service/Customers"
}
}
}
});
});
</script>