Kendo UI Grid export to Excel not working

1
votes

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>
2
kendo-uikendo-grid

2 Answers

9
votes

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

0
votes

Try This:

 toolbar: ["excel"],
        excel: {
            fileName: "Excel File Name.xlsx",
            filterable: true,
            allPages: true
        },