JQuery

Header And No Data Template In Kendo Drop Down List

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
  1.    <!DOCTYPE html>  
  2. <html>  
  3. <head>  
  4.     <meta charset="utf-8"/>  
  5.     <title>Kendo UI Snippet</title>  
  6.   
  7.     <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.3.1028/styles/kendo.common.min.css"/>  
  8.     <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.3.1028/styles/kendo.rtl.min.css"/>  
  9.     <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.3.1028/styles/kendo.silver.min.css"/>  
  10.     <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.3.1028/styles/kendo.mobile.all.min.css"/>  
  11.   
  12.     <script src="http://code.jquery.com/jquery-1.12.4.min.js"></script>  
  13.     <script src="http://kendo.cdn.telerik.com/2016.3.1028/js/kendo.all.min.js"></script>  
  14. </head>  
  15. <body>  
  16.   <h2>Header Template</h2>  
  17.   <br>  
  18. <input id="dropdownlist" />  
  19. <script>  
  20. $("#dropdownlist").kendoDropDownList({  
  21.   dataSource: [  
  22.     { id: 1, name: "India" },  
  23.     { id: 2, name: "China" },  
  24.     { id: 3, name:"Australia"}  
  25.   ],  
  26.   dataTextField: "name",  
  27.   dataValueField: "id",  
  28.   headerTemplate: '<div><h2>Countries</h2></div>'  
  29. });  
  30. </script>  
  31. </body>  
  32. </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.

  1. <input id="dropdownlist1" />  
  2. $("#dropdownlist1").kendoDropDownList({  
  3.   dataSource: [],  
  4.   dataTextField: "name",  
  5.   dataValueField: "id",  
  6.   noDataTemplate: 'No Data To Display'  
  7. });  
Result
 
Complete code is given below in KendoDropDownList.html. 
  1. <!DOCTYPE html>  
  2. <html>  
  3. <head>  
  4.     <meta charset="utf-8"/>  
  5.     <title>Kendo UI Snippet</title>  
  6.   
  7.     <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.3.1028/styles/kendo.common.min.css"/>  
  8.     <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.3.1028/styles/kendo.rtl.min.css"/>  
  9.     <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.3.1028/styles/kendo.silver.min.css"/>  
  10.     <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.3.1028/styles/kendo.mobile.all.min.css"/>  
  11.   
  12.     <script src="http://code.jquery.com/jquery-1.12.4.min.js"></script>  
  13.     <script src="http://kendo.cdn.telerik.com/2016.3.1028/js/kendo.all.min.js"></script>  
  14. </head>  
  15. <body>  
  16.   <h2>Header Template</h2>  
  17.   <br>  
  18. <input id="dropdownlist" />  
  19.  <h2>No Data Template</h2>  
  20.   <br>  
  21. <input id="dropdownlist1" />  
  22. <script>  
  23. $("#dropdownlist").kendoDropDownList({  
  24.   dataSource: [  
  25.     { id: 1, name: "India" },  
  26.     { id: 2, name: "China" },  
  27.     { id: 3, name:"Australia"}  
  28.   ],  
  29.   dataTextField: "name",  
  30.   dataValueField: "id",  
  31.   headerTemplate: '<div><h2>Countries</h2></div>'  
  32. });  
  33.   
  34. $("#dropdownlist1").kendoDropDownList({  
  35.   dataSource: [],  
  36.   dataTextField: "name",  
  37.   dataValueField: "id",  
  38.   noDataTemplate: 'No Data To Display'  
  39. });  
  40. </script>  
  41. </body>  
  42. </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.
Ebook Download
View all
Learn
View all
Get Started

You need to be a premium member to use this feature. To access it, you'll have to upgrade your membership.

Become a sharper developer and jumpstart your career.

Basic

$0

$

. 00

monthly

For Basic members:

  • Standard Profile
  • Access learning courses
  • Access free e-books
  • 1x point
Premium

$20

$

. 00

monthly

For Premium members:

  • Earn 2x reward points
  • Premium profile with Verified check
  • Premium Avatar with status update
  • Learning courses
  • Unlimited Certifications and badges on profile
  • Unlimited Book downloads
  • Access to Premium content
  • Online Training
  • Unlimited PDF conversions and downloads
  • Professional Resume Writing
  • Interview Preparations Guide
  • 25 messages per month
  • 1 "Kodzu" avatar, basic
Elite

$45

$

. 00

monthly

For Elite members:

  • Bundle E-books
  • Access to all Learn Series
  • Unlimited Apply Jobs