Custom Download In Kendo Grid

Gowtham K
Feb 29, 2016
7.3k
0
0
Article

Kendo Grid comes with an awesome feature called Export to Excel in build functionality to download the grid details. In this article I’m going to explain how to customize the functionality based on the check box selection in the Kendo Grid.

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" style="margin-top:20px">
<button id="Btn_Download" class="btn btn-default" data-bind="click:DownloadEmp">Download</button>
</div>
<br />
<br />
<div class="row">
<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="[
{'width':'30px','headerTemplate':'<input type= \'checkbox\' id=\'HeaderCheckbox\' />' },
{ 'field': ' FirstName','width':'100px'},
{ 'field': ' LastName','width':'100px'}
]"
data-bind="source:Gridlist,events:{dataBound: onDataBound}" />
</div>
</div>
</div>
</script>
<script type="text/x-kendo-template" id="EmployeeGrid_RowTemplate">
<tr data-uid="#: uid #">
<td><input type="checkbox" class="rowcheckbox" name="it" /></td>
<td><span>#= FirstName #</span></td>
<td> <span>#= LastName #</span></td>
</tr>
</script>
</body>
</html>

Please read my previous article to get an idea about implementing the row template in Kendo Grid

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);
});
$(".rowcheckbox").bind("change", function (e) {
if ($(this).is(':checked')) {
$(e.target).closest("tr").addClass("select");
} else {
$(e.target).closest("tr").removeClass("select");
}
});
$("#HeaderCheckbox").on("click", function (e) {
if ($(this).is(':checked')) {
$('div input').closest("tr").addClass("select");
} else {
$('div input').closest("tr").removeClass("select");
}
});
},
DownloadEmp:function()
{
var checked = G.KendoGrid.ViewModel.GetCheckedRowIds();
var grid = $("#EmployeeGrid").data("kendoGrid");
if (checked.length == grid.dataSource.total())
{
alert(checked.length)
var grid = $("#EmployeeGrid").data("kendoGrid");
grid.saveAsExcel();
}
else
{
var grid = $("#EmployeeGrid").getKendoGrid();
var rows = [{
cells: [
{ value: "FirstName" },
{ value: "LastName" },
]
}];
var trs = $("#EmployeeGrid").find('tr');
for (var i = 0; i < trs.length; i++) {
if ($(trs[i]).find(":checkbox").is(":checked")) {
var dataItem = grid.dataItem(trs[i]);
rows.push({
cells: [
{ value: dataItem.FirstName },
{ value: dataItem.LastName },
]
})
}
}
excelExport(rows)
}
},
}),
CreateXlsRow: function (row) {
return {
cells: [
{ value: row.FirstName },
{ value: row.LastName },
]
};
},
GetCheckedRowIds: function () {
return $.map($('#EmployeeGrid input.rowcheckbox:checked'), function (i) {
return G.KendoGrid.ViewModel.DashboardModel.Gridlist.getByUid($(i).closest("tr").data('uid')).id;
});
},
}
}
});
})(window.Gni = window.Gni || {}, jQuery);
function excelExport(rows) {
var workbook = new kendo.ooxml.Workbook({
sheets: [
{
columns: [
{ autoWidth: true },
{ autoWidth: true }
],
title: "EmployeeInfo",
rows: rows
}
]
});
kendo.saveAs({ dataURI: workbook.toDataURL(), fileName: "EmployeeInfo.xlsx" });
}

DownloadEmp function is responsible to download the grid details based on the checkbox selection.
GetcheckedRowIds function is used to get the selected rows details in the grid based on the uid.
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") {
console.log(JSON.stringify(data))
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

$.extend(true, G, {
KendoGrid: {
Core: {
ActiveEvents:function()
{
$('#HeaderCheckbox').on('click', function () {
var checked = $(this).is(':checked');
$('#EmployeeGrid input.rowcheckbox').prop('checked', checked);
});
},
}
}
});
})(window.Gni = window.Gni || {}, jQuery);
$(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();
Gni.KendoGrid.Core.ActiveEvents();
});

The ActiveEvents function is used to define the Header checkbox; i.e, according to the header checkbox status the checkbox in each row of the grid should change their status.

Result in Browser:

Downloading entire records in grid