Kendo grid data export to a excel file

kendo-ui kendo-grid

18,373

Try this,

Put this after result += "</table>"; and it's working in all browser.

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);
            }

18,373

kvs

Working as .NET Developer

Updated on May 29, 2022

Comments

kvs about 2 years

I have configured the kendo grid and configured all the table rows and header.When I click export button it is generating an excel file.But where the problem occur I don't know with same configuration I have done in IE there instead of generating file it was showing the data format in 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");

Button click for Export Grid data to 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();
});

kvs almost 11 years

Hai Jai,here is the tired example and I placed the code which you have given but still getting the same error in IE jsfiddle.net/SZBrt/100
Jaimin almost 11 years

Which version of IE you use because it generate file in IE. But Generated file with this data data:application/vnd.ms-excel,<table><tr><th>OrderID</th><th‌>Freight</th>.....
kvs almost 11 years

IE Version 10 .Is there any alternative way to rectify this problem.
Jaimin almost 11 years

try this hackworthy.blogspot.in/2012/05/…
Jaimin almost 11 years

kendoui.com/blogs/teamblog/posts/13-03-12/…
kvs almost 11 years

Hai Now I can able to download the file in all browsers jsfiddle.net/SZBrt/118 ,but problem is with the customized name.how can I set the customized name.
kvs almost 11 years

And I have verified the document you sent and modified the code here is the fiddle jsfiddle.net/SZBrt/115 in fire fox even its not getting downloaded .As from document the download supports chrome and savemob supports Ie and not clear with firefox so i just modified the code.
Jaimin almost 11 years

@kvs please post your code and mark your ans so any one with same problem known the solution.
kvs almost 11 years

I have updated the code I have done but suggest me the customized name for the file
Jaimin almost 11 years

@kvs sorry i don't understand customized name.
kvs almost 11 years

if else conditions there but else conditon not working if (window.navigator.msSaveBlob) { window.navigator.msSaveBlob(new Blob([result]), 'exporteddata@' +postfix+ '.xls'); } 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+ '.xls'; a.click(); } else{ window.open(result); }
kvs almost 11 years

let us continue this discussion in chat