Introduction
In this blog, I’ll describe how to implement the header and no data template in Kendo DropDownList. To explain the implementation of these templates in Kendo DropDownList, I have used HTML page with the Kendo UI framework
Prerequisites
Basic knowledge in HTML 5, jQuery, and Kendo UI framework.
Create a HTML page
Create a new HTML page in your application. In my case, I named it as Kendo DropDownList.html.
Header Template
Basically, the header template will be rendered as a header of the DropDownList. In Kendo, DropDownList is initialized through the headerTemplate property.
KendoDropDownList.html
- <!DOCTYPE html>
- <html>
- <head>
- <meta charset="utf-8"/>
- <title>Kendo UI Snippet</title>
-
- <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.3.1028/styles/kendo.common.min.css"/>
- <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.3.1028/styles/kendo.rtl.min.css"/>
- <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.3.1028/styles/kendo.silver.min.css"/>
- <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.3.1028/styles/kendo.mobile.all.min.css"/>
-
- <script src="http://code.jquery.com/jquery-1.12.4.min.js"></script>
- <script src="http://kendo.cdn.telerik.com/2016.3.1028/js/kendo.all.min.js"></script>
- </head>
- <body>
- <h2>Header Template</h2>
- <br>
- <input id="dropdownlist" />
- <script>
- $("#dropdownlist").kendoDropDownList({
- dataSource: [
- { id: 1, name: "India" },
- { id: 2, name: "China" },
- { id: 3, name:"Australia"}
- ],
- dataTextField: "name",
- dataValueField: "id",
- headerTemplate: '<div><h2>Countries</h2></div>'
- });
- </script>
- </body>
- </html>
From the code mentioned above, you can notice the list of countries will be displayed in the DropDownList with the header as “Countries”.
Result
![]()
No data template
No data template is used to show a message when the DropDownList contains an empty list.
Write the code given below to enable the no data template in DropdDownList.
- <input id="dropdownlist1" />
- $("#dropdownlist1").kendoDropDownList({
- dataSource: [],
- dataTextField: "name",
- dataValueField: "id",
- noDataTemplate: 'No Data To Display'
- });
Result
![]()
Complete code is given below in KendoDropDownList.html.
- <!DOCTYPE html>
- <html>
- <head>
- <meta charset="utf-8"/>
- <title>Kendo UI Snippet</title>
-
- <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.3.1028/styles/kendo.common.min.css"/>
- <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.3.1028/styles/kendo.rtl.min.css"/>
- <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.3.1028/styles/kendo.silver.min.css"/>
- <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.3.1028/styles/kendo.mobile.all.min.css"/>
-
- <script src="http://code.jquery.com/jquery-1.12.4.min.js"></script>
- <script src="http://kendo.cdn.telerik.com/2016.3.1028/js/kendo.all.min.js"></script>
- </head>
- <body>
- <h2>Header Template</h2>
- <br>
- <input id="dropdownlist" />
- <h2>No Data Template</h2>
- <br>
- <input id="dropdownlist1" />
- <script>
- $("#dropdownlist").kendoDropDownList({
- dataSource: [
- { id: 1, name: "India" },
- { id: 2, name: "China" },
- { id: 3, name:"Australia"}
- ],
- dataTextField: "name",
- dataValueField: "id",
- headerTemplate: '<div><h2>Countries</h2></div>'
- });
-
- $("#dropdownlist1").kendoDropDownList({
- dataSource: [],
- dataTextField: "name",
- dataValueField: "id",
- noDataTemplate: 'No Data To Display'
- });
- </script>
- </body>
- </html>
Conclusion
From this blog, we have seen how to implement the header and no data template in Kendo DropDownList which makes the DropDownList more detailed and meaningful.
I hope, you have enjoyed this blog. Your valuable feedback, questions or comments about this blog are always welcome.