JQuery

Templates In Kendo Multi Select Using ASP.NET Web API

Introduction

Kendo Multi Select is one of the widgets from Kendo UI package. This article explains how to implement Kendo Multi Select control in our HTML page, using ASP.NET WEB API . To explain it, I have created a RESTful GET Service, using ASP.NET WEB API, which is used to load the DataSource of Kendo panel bar.

Prerequisites

Basic knowledge of ASP.NET Web API, jQuery and Kendo UI.

Before going through this article, I strongly recommend you to refer my previous article, where I have explained how to implement Kendo multi select with remote databinding.

Content
  1. Remote Data Binding in Kendo Multi Select control. 
  2. Templates in Kendo Multi Select control.

Remote Data Binding in Kendo Multi Select control

I’m going to use the remote datasource given below, which is created, using RESTful Service from my previous article with the help of ASP.NET Web API.

  • API End Point /API/Technology/TechnologiesList.
  • Type GET.

Testing API's, using POSTMAN.

  
Figure 1 

Templates in Kendo Multi Select control

Templates are mainly used to customize the information, which is rendering each node in Multi Select. This can easily be achieved, using the template property in Kendo Multi Select.

Templates in Kendo Multi Select
  • Footer template
  • Header template
  • Item template
  • Tag template
  • No data template

Footer template is used to display the general information to the user in the footer of Kendo Multi Select. From the example given below , we are going to display the total number of the items in Kendo Multi Select.

KendoMultiSelect.html
  1. <!DOCTYPE html>  
  2. <html>  
  3.   
  4. <head>  
  5.     <title>Kendo Multi Select</title>  
  6.     <meta charset="utf-8" />  
  7.     <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2017.1.118/styles/kendo.common.min.css">  
  8.     <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2017.1.118/styles/kendo.rtl.min.css">  
  9.     <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2017.1.118/styles/kendo.default.min.css">  
  10.     <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2017.1.118/styles/kendo.mobile.all.min.css">  
  11.     <script src="http://code.jquery.com/jquery-1.12.3.min.js"></script>  
  12.     <script src="http://kendo.cdn.telerik.com/2017.1.118/js/angular.min.js"></script>  
  13.     <script src="http://kendo.cdn.telerik.com/2017.1.118/js/jszip.min.js"></script>  
  14.     <script src="http://kendo.cdn.telerik.com/2017.1.118/js/kendo.all.min.js"></script>  
  15. </head>  
  16.   
  17. <body>  
  18.     <h3> Kendo Multi Select</h3>  
  19.     <div class="demo-section k-content"> <select id="technologies" data-placeholder="Select Technology..."></select> </div>  
  20.     <script>  
  21.         $(document).ready(function() {  
  22.             var dataSource = new kendo.data.DataSource({  
  23.                 transport: {  
  24.                     read: {  
  25.                         url: "/api/Technology/TechnologiesList",  
  26.                         dataType: "json"  
  27.                     }  
  28.                 },  
  29.             });  
  30.             $("#technologies").kendoMultiSelect({  
  31.                 dataTextField: "Text",  
  32.                 dataValueField: "Value",  
  33.                 dataSource: dataSource,  
  34.                 footerTemplate: 'Total <strong>#: instance.dataSource.total() #</strong> items found'  
  35.             });  
  36.         });  
  37.     </script>  
  38. </body>  
  39.   
  40. </html>  
Result in the Browser

 

Header template

Header template is used to display the general information to the user in the header of Kendo Multi Select. From the example given below, we are going to display Microsoft Technologies as a header in Kendo Multi Select.

kendoMultiSelect.html 
  1. <!DOCTYPE html>  
  2. <html>  
  3.   
  4. <head>  
  5.     <title>Kendo Multi Select</title>  
  6.     <meta charset="utf-8" />  
  7.     <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2017.1.118/styles/kendo.common.min.css">  
  8.     <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2017.1.118/styles/kendo.rtl.min.css">  
  9.     <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2017.1.118/styles/kendo.default.min.css">  
  10.     <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2017.1.118/styles/kendo.mobile.all.min.css">  
  11.     <script src="http://code.jquery.com/jquery-1.12.3.min.js"></script>  
  12.     <script src="http://kendo.cdn.telerik.com/2017.1.118/js/angular.min.js"></script>  
  13.     <script src="http://kendo.cdn.telerik.com/2017.1.118/js/jszip.min.js"></script>  
  14.     <script src="http://kendo.cdn.telerik.com/2017.1.118/js/kendo.all.min.js"></script>  
  15. </head>  
  16.   
  17. <body>  
  18.     <h3> Kendo Multi Select</h3>  
  19.     <div class="demo-section k-content"> <select id="technologies" data-placeholder="Select Technology..."></select> </div>  
  20.     <script>  
  21.         $(document).ready(function() {  
  22.             var dataSource = new kendo.data.DataSource({  
  23.                 transport: {  
  24.                     read: {  
  25.                         url: "/api/Technology/TechnologiesList",  
  26.                         dataType: "json"  
  27.                     }  
  28.                 },  
  29.             });  
  30.             $("#technologies").kendoMultiSelect({  
  31.                 dataTextField: "Text",  
  32.                 dataValueField: "Value",  
  33.                 dataSource: dataSource,  
  34.                 headerTemplate: '<div><h3>Microsoft Technologies</h3></div>'  
  35.             });  
  36.         });  
  37.     </script>  
  38. </body>  
  39.   
  40. </html>  
Result in the Browser

 

Item template

The item template is used to display the item in a more customized way in Kendo Multi Select.

KendoMultiSelect.html 
  1. <!DOCTYPE html>  
  2. <html>  
  3.   
  4. <head>  
  5.     <title>Kendo Multi Select</title>  
  6.     <meta charset="utf-8" />  
  7.     <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2017.1.118/styles/kendo.common.min.css">  
  8.     <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2017.1.118/styles/kendo.rtl.min.css">  
  9.     <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2017.1.118/styles/kendo.default.min.css">  
  10.     <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2017.1.118/styles/kendo.mobile.all.min.css">  
  11.     <script src="http://code.jquery.com/jquery-1.12.3.min.js"></script>  
  12.     <script src="http://kendo.cdn.telerik.com/2017.1.118/js/angular.min.js"></script>  
  13.     <script src="http://kendo.cdn.telerik.com/2017.1.118/js/jszip.min.js"></script>  
  14.     <script src="http://kendo.cdn.telerik.com/2017.1.118/js/kendo.all.min.js"></script>  
  15. </head>  
  16.   
  17. <body>  
  18.     <h3> Kendo Multi Select</h3>  
  19.     <div class="demo-section k-content"> <select id="technologies" data-placeholder="Select Technology..."></select> </div>  
  20.     <script id="itemTemplate" type="text/x-kendo-template"> <span>  
  21. <i> #: Text #</i>  
  22. </span> </script>  
  23.     <script>  
  24.         $(document).ready(function() {  
  25.             var dataSource = new kendo.data.DataSource({  
  26.                 transport: {  
  27.                     read: {  
  28.                         url: "/api/Technology/TechnologiesList",  
  29.                         dataType: "json"  
  30.                     }  
  31.                 },  
  32.             });  
  33.             $("#technologies").kendoMultiSelect({  
  34.                 dataTextField: "Text",  
  35.                 dataValueField: "Value",  
  36.                 dataSource: dataSource,  
  37.                 itemTemplate: kendo.template($("#itemTemplate").html())  
  38.             });  
  39.         });  
  40.     </script>  
  41. </body>  
  42.   
  43. </html>  

From the code given above, you can notice that we have created a separate item template for Kendo Multi Select with the help of Kendo template, where we make the item display in italics.

Result in the Browser

 

Tag template

The tag template is used to display the item, which is customized when the tag is formed by selecting the item from Kendo Multi Select.

KendoMultiSelect.html

  1. <!DOCTYPE html>  
  2. <html>  
  3.   
  4. <head>  
  5.     <title>Kendo Multi Select</title>  
  6.     <meta charset="utf-8" />  
  7.     <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2017.1.118/styles/kendo.common.min.css">  
  8.     <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2017.1.118/styles/kendo.rtl.min.css">  
  9.     <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2017.1.118/styles/kendo.default.min.css">  
  10.     <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2017.1.118/styles/kendo.mobile.all.min.css">  
  11.     <script src="http://code.jquery.com/jquery-1.12.3.min.js"></script>  
  12.     <script src="http://kendo.cdn.telerik.com/2017.1.118/js/angular.min.js"></script>  
  13.     <script src="http://kendo.cdn.telerik.com/2017.1.118/js/jszip.min.js"></script>  
  14.     <script src="http://kendo.cdn.telerik.com/2017.1.118/js/kendo.all.min.js"></script>  
  15. </head>  
  16.   
  17. <body>  
  18.     <h3> Kendo Multi Select</h3>  
  19.     <div class="demo-section k-content"> <select id="technologies" data-placeholder="Select Technology..."></select> </div>  
  20.     <script id="tagTemplate" type="text/x-kendo-template"> <span>  
  21. <i> #: Text #</i>  
  22. </span> </script>  
  23.     <script>  
  24.         $(document).ready(function() {  
  25.             var dataSource = new kendo.data.DataSource({  
  26.                 transport: {  
  27.                     read: {  
  28.                         url: "/api/Technology/TechnologiesList",  
  29.                         dataType: "json"  
  30.                     }  
  31.                 },  
  32.             });  
  33.             $("#technologies").kendoMultiSelect({  
  34.                 dataTextField: "Text",  
  35.                 dataValueField: "Value",  
  36.                 dataSource: dataSource,  
  37.                 tagTemplate: kendo.template($("#tagTemplate").html())  
  38.             });  
  39.         });  
  40.     </script>  
  41. </body>  
  42.   
  43. </html>   
Result in the Browser

 
No data template

The no data template is used to display some message to the user, when there is no item in Kendo Multi Select.

KendoMultiSelect.html

  1. <!DOCTYPE html>  
  2. <html>  
  3.   
  4. <head>  
  5.     <title>Kendo Multi Select</title>  
  6.     <meta charset="utf-8" />  
  7.     <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2017.1.118/styles/kendo.common.min.css">  
  8.     <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2017.1.118/styles/kendo.rtl.min.css">  
  9.     <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2017.1.118/styles/kendo.default.min.css">  
  10.     <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2017.1.118/styles/kendo.mobile.all.min.css">  
  11.     <script src="http://code.jquery.com/jquery-1.12.3.min.js"></script>  
  12.     <script src="http://kendo.cdn.telerik.com/2017.1.118/js/angular.min.js"></script>  
  13.     <script src="http://kendo.cdn.telerik.com/2017.1.118/js/jszip.min.js"></script>  
  14.     <script src="http://kendo.cdn.telerik.com/2017.1.118/js/kendo.all.min.js"></script>  
  15. </head>  
  16.   
  17. <body>  
  18.     <h3> Kendo Multi Select</h3>  
  19.     <div class="demo-section k-content"> <select id="technologies" data-placeholder="Select Technology..."></select> </div>  
  20.     <script id="noDataTemplate" type="text/x-kendo-template"> <span>  
  21. <b> Sorry! No Data</b>  
  22. </span> </script>  
  23.     <script>  
  24.         $(document).ready(function() {  
  25.             var dataSource = new kendo.data.DataSource({  
  26.                 transport: {  
  27.                     read: {  
  28.                         url: "/api/Technology/TechnologiesList",  
  29.                         dataType: "json"  
  30.                     }  
  31.                 },  
  32.             });  
  33.             $("#technologies").kendoMultiSelect({  
  34.                 dataTextField: "Text",  
  35.                 dataValueField: "Value",  
  36.                 dataSource: dataSource,  
  37.                 noDataTemplate: kendo.template($("#noDataTemplate").html())  
  38.             });  
  39.         });  
  40.     </script>  
  41. </body>  
  42.   
  43. </html>  
Result in the Browser

 
Reference

http://docs.telerik.com/kendo-ui/api/javascript/ui/multiselect

I hope, you have enjoyed this article. Your valuable feedback, questions or comments about this article are always welcome.

Up Next
    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