Introduction:
Kendo grid is one of the powerful control/widgets to display data in a table format. It has many paging, sorting, filtering, grouping, editing, endless scrolling, export and many more. In this article I’m going to explain how to export the selected record from the grid as a excel.
Kendo Grid with JQuery:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Kendo UI Snippet</title>
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2021.3.1207/styles/kendo.default-v2.min.css" />
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2021.3.1207/js/kendo.all.min.js"></script>
</head>
<body>
<h4>Kenod Grid</h4>
<div id="grid"></div>
<script>
$(document).ready(function () {
$("#grid").kendoGrid({
toolbar: ["search"],
search: {
fields: [
{ name: "age", operator: "eq" },
{ name: "name", operator: "contains" },
]
},
dataSource: {
data: [
{ name: "Alexa", age: 29, country: "United States", address: "#123" },
{ name: "Siri", age: 30, country: "United States", address: "#123" },
{ name: "Shaaniya", age: 30, country: "India", address: "#123" },
]
},
selectable: "multiple cell",
columns: [
{
field: "name", title: "Name", width: 550, sticky: true,
},
{ field: "age", title: "Age", width: 300 },
{ field: "country", title: "Country", width: 500 },
{ field: "address", title: "Address", width: 200 }
],
});
});
</script>
</body>
</html>The above code will initialize the kendo grid widget and the grid will render the static data which was defined as a datasource.
The property selectable is used to enable the selection in the grid. I have set it as multiple cell, we have many more selectable options, click here to learn about other selection option.
Let’s initialize the kendo context menu to list out the option when cell is selected.
<ul id="contextmenu" class="contextMenuIcon">
<li id="export">Export</li>
<li id="exportWithHeaders">Export with Headers</li>
</ul>$("#contextmenu").kendoContextMenu({
target: ".contextMenuIcon",
showOn: "click",
direction: "right",
alignToAnchor: true,
copyAnchorStyles: false,
select: function (e) {
var item = e.item.id;
switch (item) {
case "export":
exportSelected();
break;
case "exportWithHeaders":
exportSelectedWithHeaders();
break;
default:
break;
};
}
});The above code will initialize the kendo context menu
showOn property will define when to show the context menu, in our case we need to context menu when the grid cell was selected.
We have two options in the context menu
1. Export – This will export the selected data
2. Export with Headers – This will export the selected data with header
Define two events for Kendo grid.
- onDataBound
This event was triggered after the datasource bound to the grid, lets make the context menu hidden in this event.
function onDataBound() {
$(".contextMenuIcon").addClass("hidden");
}2. onChange()
This event was triggered when there is any change in the grid, in our case this event will be trigger when the user selects the grid cell. Based on our requirement we need to display context menu when the cell was selected to export the data.
function onChange() {
debugger;
let selectedRowLength = this.select().length;
let contextMenuIcon = $(".contextMenuIcon");
if (selectedRowLength > 0) {
contextMenuIcon.removeClass("hidden");
} else {
contextMenuIcon.addClass("hidden");
}
}The exportSelected function is defined to export the selected data.
function exportSelected() {
let selected = grid.select();
if (selected.length === 0) {
kendo.alert("Please select cells before exporting.");
return;
}
grid.exportSelectedToExcel(false);
}The exportSelectedWithHeaders function is defined to export the selected data with column header.
Note: Include <script src=”https://kendo.cdn.telerik.com/2021.3.1207/js/jszip.min.js”></script> to use exportSelectedToExcel function.
Complete code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Kendo UI Snippet</title>
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2021.3.1207/styles/kendo.default-v2.min.css" />
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2021.3.1207/js/kendo.all.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2021.3.1207/js/jszip.min.js"></script>
</head>
<body>
<h4>Kenod Grid</h4>
<span class='k-primary k-bg-primary k-icon k-i-menu contextMenuIcon'></span>
<ul id="contextmenu" class="contextMenuIcon">
<li id="export">Export</li>
<li id="exportWithHeaders">Export with Headers</li>
</ul>
<div id="grid"></div>
<script>
$(document).ready(function () {
$("#grid").kendoGrid({
toolbar: ["search"],
search: {
fields: [
{ name: "age", operator: "eq" },
{ name: "name", operator: "contains" },
]
},
dataSource: {
data: [
{ name: "Alexa", age: 29, country: "United States", address: "#123" },
{ name: "Siri", age: 30, country: "United States", address: "#123" },
{ name: "Shaaniya", age: 30, country: "India", address: "#123" },
]
},
selectable: "multiple cell",
dataBound: onDataBound,
change: onChange,
navigatable: true,
mobile: true,
columns: [
{
field: "name", title: "Name", width: 550, sticky: true,
},
{ field: "age", title: "Age", width: 300 },
{ field: "country", title: "Country", width: 500 },
{ field: "address", title: "Address", width: 200 }
],
});
var grid = $("#grid").data("kendoGrid");
$("#contextmenu").kendoContextMenu({
target: ".contextMenuIcon",
showOn: "click",
direction: "right",
alignToAnchor: true,
copyAnchorStyles: false,
select: function (e) {
var item = e.item.id;
switch (item) {
case "export":
exportSelected();
break;
case "exportWithHeaders":
exportSelectedWithHeaders();
break;
default:
break;
};
}
});
function onDataBound() {
$(".contextMenuIcon").addClass("hidden");
}
function onChange() {
debugger;
let selectedRowLength = this.select().length;
let contextMenuIcon = $(".contextMenuIcon");
if (selectedRowLength > 0) {
contextMenuIcon.removeClass("hidden");
} else {
contextMenuIcon.addClass("hidden");
}
}
function exportSelected() {
let selected = grid.select();
if (selected.length === 0) {
kendo.alert("Please select cells before exporting.");
return;
}
grid.exportSelectedToExcel(false);
}
function exportSelectedWithHeaders() {
let selected = grid.select();
if (selected.length === 0) {
kendo.alert("Please select cells before exporting.");
return;
}
grid.exportSelectedToExcel(true);
}
});
</script>
<style>
.k-default-v2 .contextMenuIcon {
margin-top: 45px;
}
.hidden {
display: none;
}
.k-bootstrap-v4 .contextMenuIcon {
margin-top: 60px;
}
.k-material-v2 .contextMenuIcon {
margin-top: 65px;
}
.contextMenuIcon {
position: absolute;
right: 20px;
margin-top: 32px;
font-size: 16px;
padding: 8px;
cursor: pointer;
border-radius: 5%;
color: white;
z-index: 10000;
}
.k-grid tbody tr {
line-height: 30px;
}
#contextmenu .k-menu-item {
padding: 4px 8px;
}
</style>
</body>
</html>Kendo grid with selection and export
select the record and in top right corner click on context Menu icon, it will give you the option to export data and with header.
Summary:
We have seen how to initialize the kendo grid and context menu widgets and exporting the data based on the selection in the grid.
Get source code from github.
Reference – jQuery Grid Documentation | Grid Overview | Kendo UI for jQuery (telerik.com)
Happy Coding!!!
