Working With Row Template In Kendo Grid

Gowtham K
8y
12.9k
0
0

Article

Implementing the Row template makes the Kendo Grid more flexible while working with the custom columns. To explain how to implement the Row template in the Kendo Gird, I am going to use the following API, which is used as a source to populate the Grid. Please read my previous article to get an idea about how to create an API using ASP.NET WEB API.

API:

GET: /api/Employees

Response of the above End Point in POSTMAN

Database Table:

Now the API is ready to consume.

Using a Kendo Grid with MVVM pattern

Creating a HTML page

Create a new HTML page in the project.

Design:

<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8" />
<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.1.226/styles/kendo.common.min.css">
<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.1.226/styles/kendo.default.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://kendo.cdn.telerik.com/2016.1.226/js/jszip.min.js"></script>
<script src="http://kendo.cdn.telerik.com/2016.1.226/js/kendo.all.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="Scripts/ViewModel/Core.js"></script>
<script src="Scripts/ViewModel/Data.js"></script>
<script src="Scripts/ViewModel/ViewModel.js"></script>
</head>
<body>
<div class="col-lg-12">
<div id="Main" class="main"></div>
</div>
<script type="text/x-kendo-template" id="Layout-temp">
<div class="col-lg-12">
<div id="content"></div>
</div>
</script>
<script type="text/x-kendo-template" id="Dashboard-temp">
<div class="row margin-t10">
<div class="col-lg-12">
<div data-role="grid" id="EmployeeGrid"
data-sortable="true"
data-scrollable="true"
data-resizable="true"
data-pageable="{refresh: true, pageSizes: [25, 50, 100, 200]}"
data-row-template="EmployeeGrid_RowTemplate"
data-columns="[
{ 'field': 'FirstName','width':'100px'},
{ 'field': 'LastName','width':'100px' }
]"
data-bind="source:Gridlist,events:{dataBound: onDataBound}" />
</div>
</div>
</script>
<script type="text/x-kendo-template" id="EmployeeGrid_RowTemplate">
<tr data-uid="#: uid #">
<td><span>#= FirstName #</span></td>
<td><span>#= LastName #</span></td>
</tr>
</script>
</body>
</html>

In the Row template I have set the Uid’s for table row because by default each row in Kendo grid will consist of unique uid’s as in the following figure.

Creating a JavaScript file

View Model:

Create a JavaScript file, in my case I named it ViewModel.Js, The View-Model is a representation of your data (the Model) which will be displayed in the View.

ViewModel.Js

(function (G, $, undefined) {
$.extend(true, G, {
KendoGrid: {
ViewModel: {
DashboardModel: new kendo.observable({
Gridlist: G.KendoGrid.Data.GridList,
onDataBound: function (e) {
$('#EmployeeGrid thead').each(function () {
kendo.bind($(this), G.KendoGrid.ViewModel.DashboardModel);
});
},
}),
}
}
});
})(window.Gni = window.Gni || {}, jQuery);

The onDataBound function is used to bind the Models in the Grid.

Data: Create a JavaScript file, in my case I named it Data.Js, This script is responsible to bind the DataSource by requesting the API.

Data.js

(function (G, $, K, undefined) {
$.extend(true, G, {
KendoGrid: {
Data: {
GridList: new K.data.DataSource({
//navigatable: true,
batch: true,
pageSize: 5,
transport: {
read: {
url: 'api/Employees',
type: 'GET',
dataType: 'json',
},
parameterMap: function (data, operation) {
if (operation == "read") {
return JSON.stringify(data);
}
return data;
}
},
schema: {
model: {
id: "EmployeeID",
fields: {
"FirstName": { type: "string” },
"LastName": { type: "string"},
}
}
},
}),
}
}
});
})(window.Gni = window.Gni || {}, jQuery, kendo);

Core:

Create a JavaScript file, in my case I named it Core.Js. This core script is used to start the rendering of the templates and calls the view model to bind the data in the UI.

Core.js

$(function () {
var Layout = new kendo.Layout("Layout-temp");
var DashboardView = new kendo.View("Dashboard-temp", { model: Gni.KendoGrid.ViewModel.DashboardModel });
var router = new kendo.Router({
init: function () {
Layout.render("#Main");
Layout.showIn("#content", DashboardView);
}
});
router.start();
});

Result in Browser:

Let us customize the Kendo Grid with ease using the row template.

Consider the scenario where you need to display the full name instead of displaying the first name and last name, here the row templates comes into the picture.

Just modify the above HTML code as below:

<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8" />
<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.1.226/styles/kendo.common.min.css">
<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.1.226/styles/kendo.default.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://kendo.cdn.telerik.com/2016.1.226/js/jszip.min.js"></script>
<script src="http://kendo.cdn.telerik.com/2016.1.226/js/kendo.all.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="Scripts/ViewModel/Core.js"></script>
<script src="Scripts/ViewModel/Data.js"></script>
<script src="Scripts/ViewModel/ViewModel.js"></script>
</head>
<body>
<div class="col-lg-12">
<div id="Main" class="main"></div>
</div>
<script type="text/x-kendo-template" id="Layout-temp">
<div class="col-lg-12">
<div id="content"></div>
</div>
</script>
<script type="text/x-kendo-template" id="Dashboard-temp">
<div class="row margin-t10">
<div class="col-lg-12" id="scroll">
<div data-role="grid" id="EmployeeGrid"
data-sortable="true"
data-scrollable="true"
data-resizable="true"
data-pageable="{refresh: true, pageSizes: [25, 50, 100, 200]}"
data-row-template="EmployeeGrid_RowTemplate"
data-columns="[
{ 'title': ' Full Name','width':'100px'},
]"
data-bind="source:Gridlist,events:{dataBound: onDataBound}" />
</div>
</div>
</script>
<script type="text/x-kendo-template" id="EmployeeGrid_RowTemplate">
<tr data-uid="#: uid #">
<td><span>#= FirstName #</span> <span>#= LastName #</span></td>
</tr>
</script>
</body>
</html>

Result in Browser:

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