Kendo grid data export to excel file

Question

I set up a kendo grid and configured all the rows of the table and the header. When I click the export button, it generates an excel file. But where the problem arises, I do not know, with the same configuration that I did in IE, instead of generating the file, I showed the data format in the URL with data:application/vnd.ms-excel,<table><tr><th>OrderID</th><th>Freight</th>.....

  var grid = $("#grid").kendoGrid({ dataSource: { type : "odata", transport : { read: "http://demos.kendoui.com/service/Northwind.svc/Orders" }, schema : { model: { fields: { OrderID : { type: "number" }, Freight : { type: "number" }, ShipName : { type: "string" }, OrderDate: { type: "date" }, ShipCity : { type: "string" } } } }, pageSize : 10 }, filterable: true, sortable : true, pageable : true, columns : [ { field : "OrderID", filterable: false }, "Freight", { field : "OrderDate", title : "Order Date", width : 100, format: "{0:MM/dd/yyyy}" }, { field: "ShipName", title: "Ship Name", width: 200 }, { field: "ShipCity", title: "Ship City" } ] }).data("kendoGrid"); 

Click the "Export data to table" button in Excel.

 $("#btnExport").click(function(e) { var dataSource = $("#grid").data("kendoGrid").dataSource; var filteredDataSource = new kendo.data.DataSource( { data: dataSource.data(), filter: dataSource.filter() }); filteredDataSource.read(); var data = filteredDataSource.view(); var result = "data:application/vnd.ms-excel,"; result += "<table><tr><th>OrderID</th><th>Freight</th><th>Order Date</th><th>Ship Name</th><th>Ship City</th></tr>"; for (var i = 0; i < data.length; i++) { result += "<tr>"; result += "<td>"; result += data[i].OrderID; result += "</td>"; result += "<td>"; result += data[i].Freight; result += "</td>"; result += "<td>"; result += kendo.format("{0:MM/dd/yyyy}", data[i].OrderDate); result += "</td>"; result += "<td>"; result += data[i].ShipName; result += "</td>"; result += "<td>"; result += data[i].ShipCity; result += "</td>"; result += "</tr>"; } result += "</table>"; if (window.navigator.msSaveBlob) { window.navigator.msSaveBlob(new Blob([result]),'export.xls'); } else { window.open(result); } e.preventDefault(); }); 

Answer 1

Try it,

Put this after result += "</table>"; and it will work in all browsers.

 if (window.navigator.msSaveBlob) { window.navigator.msSaveBlob(new Blob([result]), 'exporteddata' + postfix + 'export.csv'); } else if (window.webkitURL != null) { // Chrome allows the link to be clicked programmatically. var a = document.createElement('a'); var table_div = (document.getElementById('grid').getElementsByTagName('tbody')[0]); var table_html = table_div.innerHTML.replace(); a.href = result; a.download = 'exporteddata' + postfix + 'export.csv'; a.click(); } else { window.open(result); } 

Answer 2

If you want to export data to CSV (openable in Excel), I wrote some code, and this is on github as Kendo Grid CSV Download

Answer 3

I made Frankenstein with a kendo grid and jquery-javascript tablet library http://www.datatables.net/ . to support export to csv, excel, pdf. Here is my solution:

Add DataTable and css library

  <script src="media/js/jquery.dataTables.min.js"></script> <script src="extras/TableTools/media/js/TableTools.min.js"></script> <style type="text/css" title="currentStyle"> @import "media/css/demo_page.css"; @import "media/css/jquery.dataTables_themeroller.css"; @import "extras/TableTools/media/css/TableTools.css"; @import "extras/TableTools/media/css/TableTools_JUI.css"; </style> 

In your .js

  $("#btnExport").click(function (e) { //Get your data from kendo grid and apply filters var dataSource = $("#yourKendoGrid").data("kendoGrid").dataSource; var filters = dataSource.filter(); var allData = dataSource.data(); var query = new kendo.data.Query(allData); var data = query.filter(filters).data; //Set your column headers var result = "<table id='ExportedTable'><thead><tr><th>Col 1</th><th>Col 2</th><th>Col 3</th><th>Col 4</th></thead></tr>"; result += "<tbody>"; //Adding rows for (var i = 0; i < data.length; i++) { result += "<tr>"; result += "<td>"; result += kendo.format("{0:MM/dd/yyyy}", data[i].Date1); result += "</td>"; result += "<td>"; result += kendo.format("{0:MM/dd/yyyy}", data[i].Date2); result += "</td>"; result += "<td>"; result += data[i].Fiel3; result += "</td>"; result += "<td>"; result += data[i].Field4; result += "</td>"; result += "</tr>"; } result += "</tbody>"; result += "</table>"; //Append your grid to your div or element. $("#GridToExport").empty().append(result); //Initialize dataTable, to get the export functionality $("#ExportedTable").dataTable( { "sDom": 'T<"clear"><"H"lfr>t<"F"ip>', "oTableTools": { "sSwfPath": "extras/TableTools/media/swf/copy_csv_xls_pdf.swf" }, } ); //Hide your table if you want to have only kendo grid $("#ExportedTable").hide(); //Hide the info panel and paginate controls from datatable component $("[class*='dataTables_info']").hide(); $("[class*='dataTables_paginate']").hide(); $("[class*='dataTables_filter']").hide(); $("[class*='dataTables_length']").hide(); e.preventDefault(); }); 

So you get it