Templates In Kendo Multi Select Using ASP.NET Web API

Gowtham K
7y
10.2k
0
2

Article

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

Remote Data Binding in Kendo Multi Select control.
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

<!DOCTYPE html>
<html>
<head>
<title>Kendo Multi Select</title>
<meta charset="utf-8" />
<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2017.1.118/styles/kendo.common.min.css">
<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2017.1.118/styles/kendo.rtl.min.css">
<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2017.1.118/styles/kendo.default.min.css">
<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2017.1.118/styles/kendo.mobile.all.min.css">
<script src="http://code.jquery.com/jquery-1.12.3.min.js"></script>
<script src="http://kendo.cdn.telerik.com/2017.1.118/js/angular.min.js"></script>
<script src="http://kendo.cdn.telerik.com/2017.1.118/js/jszip.min.js"></script>
<script src="http://kendo.cdn.telerik.com/2017.1.118/js/kendo.all.min.js"></script>
</head>
<body>
<h3> Kendo Multi Select</h3>
<div class="demo-section k-content"> <select id="technologies" data-placeholder="Select Technology..."></select> </div>
<script>
$(document).ready(function() {
var dataSource = new kendo.data.DataSource({
transport: {
read: {
url: "/api/Technology/TechnologiesList",
dataType: "json"
}
},
});
$("#technologies").kendoMultiSelect({
dataTextField: "Text",
dataValueField: "Value",
dataSource: dataSource,
footerTemplate: 'Total <strong>#: instance.dataSource.total() #</strong> items found'
});
});
</script>
</body>
</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

<!DOCTYPE html>
<html>
<head>
<title>Kendo Multi Select</title>
<meta charset="utf-8" />
<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2017.1.118/styles/kendo.common.min.css">
<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2017.1.118/styles/kendo.rtl.min.css">
<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2017.1.118/styles/kendo.default.min.css">
<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2017.1.118/styles/kendo.mobile.all.min.css">
<script src="http://code.jquery.com/jquery-1.12.3.min.js"></script>
<script src="http://kendo.cdn.telerik.com/2017.1.118/js/angular.min.js"></script>
<script src="http://kendo.cdn.telerik.com/2017.1.118/js/jszip.min.js"></script>
<script src="http://kendo.cdn.telerik.com/2017.1.118/js/kendo.all.min.js"></script>
</head>
<body>
<h3> Kendo Multi Select</h3>
<div class="demo-section k-content"> <select id="technologies" data-placeholder="Select Technology..."></select> </div>
<script>
$(document).ready(function() {
var dataSource = new kendo.data.DataSource({
transport: {
read: {
url: "/api/Technology/TechnologiesList",
dataType: "json"
}
},
});
$("#technologies").kendoMultiSelect({
dataTextField: "Text",
dataValueField: "Value",
dataSource: dataSource,
headerTemplate: '<div><h3>Microsoft Technologies</h3></div>'
});
});
</script>
</body>
</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

<!DOCTYPE html>
<html>
<head>
<title>Kendo Multi Select</title>
<meta charset="utf-8" />
<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2017.1.118/styles/kendo.common.min.css">
<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2017.1.118/styles/kendo.rtl.min.css">
<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2017.1.118/styles/kendo.default.min.css">
<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2017.1.118/styles/kendo.mobile.all.min.css">
<script src="http://code.jquery.com/jquery-1.12.3.min.js"></script>
<script src="http://kendo.cdn.telerik.com/2017.1.118/js/angular.min.js"></script>
<script src="http://kendo.cdn.telerik.com/2017.1.118/js/jszip.min.js"></script>
<script src="http://kendo.cdn.telerik.com/2017.1.118/js/kendo.all.min.js"></script>
</head>
<body>
<h3> Kendo Multi Select</h3>
<div class="demo-section k-content"> <select id="technologies" data-placeholder="Select Technology..."></select> </div>
<script id="itemTemplate" type="text/x-kendo-template"> <span>
<i> #: Text #</i>
</span> </script>
<script>
$(document).ready(function() {
var dataSource = new kendo.data.DataSource({
transport: {
read: {
url: "/api/Technology/TechnologiesList",
dataType: "json"
}
},
});
$("#technologies").kendoMultiSelect({
dataTextField: "Text",
dataValueField: "Value",
dataSource: dataSource,
itemTemplate: kendo.template($("#itemTemplate").html())
});
});
</script>
</body>
</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

<!DOCTYPE html>
<html>
<head>
<title>Kendo Multi Select</title>
<meta charset="utf-8" />
<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2017.1.118/styles/kendo.common.min.css">
<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2017.1.118/styles/kendo.rtl.min.css">
<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2017.1.118/styles/kendo.default.min.css">
<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2017.1.118/styles/kendo.mobile.all.min.css">
<script src="http://code.jquery.com/jquery-1.12.3.min.js"></script>
<script src="http://kendo.cdn.telerik.com/2017.1.118/js/angular.min.js"></script>
<script src="http://kendo.cdn.telerik.com/2017.1.118/js/jszip.min.js"></script>
<script src="http://kendo.cdn.telerik.com/2017.1.118/js/kendo.all.min.js"></script>
</head>
<body>
<h3> Kendo Multi Select</h3>
<div class="demo-section k-content"> <select id="technologies" data-placeholder="Select Technology..."></select> </div>
<script id="tagTemplate" type="text/x-kendo-template"> <span>
<i> #: Text #</i>
</span> </script>
<script>
$(document).ready(function() {
var dataSource = new kendo.data.DataSource({
transport: {
read: {
url: "/api/Technology/TechnologiesList",
dataType: "json"
}
},
});
$("#technologies").kendoMultiSelect({
dataTextField: "Text",
dataValueField: "Value",
dataSource: dataSource,
tagTemplate: kendo.template($("#tagTemplate").html())
});
});
</script>
</body>
</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

<!DOCTYPE html>
<html>
<head>
<title>Kendo Multi Select</title>
<meta charset="utf-8" />
<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2017.1.118/styles/kendo.common.min.css">
<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2017.1.118/styles/kendo.rtl.min.css">
<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2017.1.118/styles/kendo.default.min.css">
<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2017.1.118/styles/kendo.mobile.all.min.css">
<script src="http://code.jquery.com/jquery-1.12.3.min.js"></script>
<script src="http://kendo.cdn.telerik.com/2017.1.118/js/angular.min.js"></script>
<script src="http://kendo.cdn.telerik.com/2017.1.118/js/jszip.min.js"></script>
<script src="http://kendo.cdn.telerik.com/2017.1.118/js/kendo.all.min.js"></script>
</head>
<body>
<h3> Kendo Multi Select</h3>
<div class="demo-section k-content"> <select id="technologies" data-placeholder="Select Technology..."></select> </div>
<script id="noDataTemplate" type="text/x-kendo-template"> <span>
<b> Sorry! No Data</b>
</span> </script>
<script>
$(document).ready(function() {
var dataSource = new kendo.data.DataSource({
transport: {
read: {
url: "/api/Technology/TechnologiesList",
dataType: "json"
}
},
});
$("#technologies").kendoMultiSelect({
dataTextField: "Text",
dataValueField: "Value",
dataSource: dataSource,
noDataTemplate: kendo.template($("#noDataTemplate").html())
});
});
</script>
</body>
</html>