New to Telerik UI for ASP.NET MVC? Start a free 30-day trial

Exporting Multiple Grids to Excel

Environment

Product Version	2022.2.621
Product	Telerik UI for ASP.NET MVC Grid

Description

How can I export multiple Grids to the same Excel file?

Solution

The example below relies on the following key steps:

Create an external button to export the data when it is clicked.
Use the client-side saveAsExcel method to trigger the data export of each Grid.
Handle the ExcelExport event of the two Grids and prevent their default action.
Create a new Workbook by using the sheets of the Grids Workbooks and save it through the kendo.saveAs() method.

Razor
    //Export to Excel Button
    @(Html.Kendo().Button()
        .Name("exportData")
        .Content("Export to Excel")
        .Icon("file-excel")
        .Events(ev => ev.Click("exportDataClick"))
    )

    //First Grid
    @(Html.Kendo().Grid<Kendo.Mvc.Examples.Models.ProductViewModel>()
        .Name("products")
        .Columns(columns =>
        {
            columns.Bound(p => p.ProductName);
            columns.Bound(p => p.UnitPrice);
            columns.Bound(p => p.UnitsOnOrder);
            columns.Bound(p => p.UnitsInStock);
        })
        .Events(e => e.ExcelExport("products_excelExport"))
        .Pageable()
        .DataSource(dataSource => dataSource
            .Ajax()
            .PageSize(20)
            .Read(read => read.Action("Excel_Export_Read", "Grid"))
        )
    )
    //Second Grid
    @(Html.Kendo().Grid<Kendo.Mvc.Examples.Models.OrderViewModel>()    
        .Name("orders")
        .Columns(columns => {
            columns.Bound(p => p.OrderID).Filterable(false).Width(100);
            columns.Bound(p => p.Freight).Width(100);
            columns.Bound(p => p.OrderDate).Format("{0:MM/dd/yyyy}").Width(140);
            columns.Bound(p => p.ShipName);
            columns.Bound(p => p.ShipCity).Width(150);
        })
        .Events(e => e.ExcelExport("orders_excelExport"))
        .Pageable()
        .DataSource(dataSource => dataSource
            .Ajax()
            .PageSize(20)
            .Read(read => read.Action("Orders_Read", "Grid"))
        )
    )
JavaScript
    <script src="https://unpkg.com/jszip/dist/jszip.min.js"></script>
    <script>
        // Use Promises to sync the exports.
        var promises = [
            $.Deferred(),
            $.Deferred()
        ];

        function exportDataClick(e) { //"Export to Excel" button "click" event handler.
            // Trigger export of the "products" Grid.
            $("#products").data("kendoGrid").saveAsExcel();
            // Trigger export of the "orders" Grid.
            $("#orders").data("kendoGrid").saveAsExcel();
            // Wait for both exports to finish.
            $.when.apply(null, promises)
            .then(function (productsWorkbook, ordersWorkbook) {
                // Create a new workbook using the sheets of the "products" and "orders" workbooks.
                var sheets = [
                    productsWorkbook.sheets[0],
                    ordersWorkbook.sheets[0]
                ];
                sheets[0].title = "Products";
                sheets[1].title = "Orders";
                var workbook = new kendo.ooxml.Workbook({
                    sheets: sheets
                });
                // Save the new workbook.
                workbook.toDataURLAsync().then(function(dataURL) {
                    kendo.saveAs({
                        dataURI: dataURL,
                        fileName: "ProductsAndOrders.xlsx"
                    });
                });

                promises = [
                    $.Deferred(),
                    $.Deferred()
                ];
            });
        }
        function products_excelExport(e) { //"ExcelExport" event handler of "products" Grid.
            e.preventDefault();
            promises[0].resolve(e.workbook);
        }
        function orders_excelExport(e) { //"ExcelExport" event handler of "orders" Grid.
            e.preventDefault();
            promises[1].resolve(e.workbook);
        }
    </script>

The solution requires Telerik UI for ASP.NET MVC 2014.3.1125 version or later. Earlier versions do not expose the ExcelExport event through the fluent API.

To review the complete example, refer to the ASP.NET MVC project on how to export multiple Grids to the same Excel file.

Exporting Multiple Grids to Excel

Environment

Description

Solution

More ASP.NET MVC Grid Resources

See Also