Nixoderm
Nixoderm

Reputation: 355

Kendo UI Grid export to Excel not working

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

Answers (2)

Rafiqul Islam
Rafiqul Islam

Reputation: 961

Try This:

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

Upvotes: 0

Carsten Franke
Carsten Franke

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

Related Questions