MVC Kendo Grid export to excel by clicking extenrally placed button

0
votes

I have a special scenario to excel export functionality on Kendo-UI MVC Grid.

Scenario: I would like to export the Kendo MVC Grid to an excel sheet , but when Clicking the button placed outside of Grid, I don't want to show or use the default Export to excel button provided by Kendo, Instead I want to use another html input button. Would anyone please help me on this? Any help will be appreciated.

2
kendo-uikendo-gridkendo-asp.net-mvc

2 Answers

3
votes

Please try with the below code snippet.

<div id="grid"></div>
<input type="button" onclick="downlaodexcel()" value="Export to excel" />
<script>
    $("#grid").kendoGrid({
        dataSource: {
            type: "odata",
            transport: {
                read: "http://demos.telerik.com/kendo-ui/service/Northwind.svc/Products"
            },
            pageSize: 10
        },
        sortable: true,
        pageable: true,
        columns: [
            { width: 300, field: "ProductName", title: "Product Name" },
            { field: "UnitsOnOrder", title: "Units On Order" },
            { field: "UnitsInStock", title: "Units In Stock" }
        ]
    });

    function downlaodexcel() {
        $("#grid").getKendoGrid().saveAsExcel();
    }
</script>

Let me know if any concern.

1
votes

I know that the Kendo grid now have built in exporting as of the Kendo UI Q3 2014 (2014.3.1119) release. But if you're like me who's stuck with an older version and ran into the fact that .saveAsExcel() only exports the current page try this.

var dataSource = $("#grid").data("kendoGrid").dataSource;
total = dataSource.total();
dataSource.pageSize(total);
$("#grid").getKendoGrid().saveAsExcel();
dataSource.pageSize(20);

Basically it sets the page size to get everything and then sets it back.