Reputation: 355
I had a similar problem like this, why my excel
export button not working?
what wrong with it. Thanks for help.
$("#grid").kendoGrid({
toolbar: ["create", "excel", "pdf"],
excel: {
fileName: "Test.xlsx",
allPages: true
},
columns: [
{ field: "name" },
{ field: "age" }
],
dataSource: {
data: [
{ id: 1, name: "Jane Doe", age: 30 },
{ id: 2, name: "John Doe", age: 33},
],
schema: {
model: { id: "id" }
}
},
editable: true
});
.k-grid-toolbar {
display: flex;
flex-direction: row;
justify-content: flex-start;
align-items: center;
}
.k-grid-toolbar .k-grid-excel {
margin-left: auto;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>Kendo UI Snippet</title>
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2019.1.220/styles/kendo.common.min.css"/>
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2019.1.220/styles/kendo.rtl.min.css"/>
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2019.1.220/styles/kendo.silver.min.css"/>
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2019.1.220/styles/kendo.mobile.all.min.css"/>
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2019.1.220/js/kendo.all.min.js"></script>
</head>
<body>
<div id="grid"></div>
</body>
</html>
Upvotes: 2
Views: 7750
Reputation: 961
Try This:
toolbar: ["excel"],
excel: {
fileName: "Excel File Name.xlsx",
filterable: true,
allPages: true
},
Upvotes: 0
Reputation: 1669
If you would have checked the browser's console, you would have seen that Kendo misses some libraries. "To take full advantage of the Excel export feature, download the JSZip library and include the file before the Kendo UI JavaScript files, as shown" here: https://docs.telerik.com/kendo-ui/framework/excel/introduction#requirements
Upvotes: 13