Exporting Multiple Grids to Excel

Updated on Mar 30, 2026

Environment

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

Description

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

Solution

The example below relies on the following key steps:

1. Create an external button to export the data when it is clicked.
2. Use the client-side saveAsExcel method to trigger the data export of each Grid.
3. Handle the ExcelExport event of the two Grids and prevent their default action.
4. 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

    <!-- JSZip library is required for Excel export. Load it before using Excel export features. -->
    <!-- Starting from Q1 2024, JSZip is no longer distributed with Kendo UI. Use unpkg or another official CDN. -->
    <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>

Starting with Kendo UI version 2024.1.130 (Q1 2024), the JSZip library is no longer distributed with Kendo UI. You must include it from an official distribution channel such as unpkg or Cloudflare. Ensure the JSZip script loads successfully before attempting Excel export operations.

For a runnable example based on the code above, refer to the REPL project on exporting multiple Grids to Excel.

More ASP.NET Core Grid Resources

• ASP.NET Core Grid Documentation

• ASP.NET Core Grid Demos

• ASP.NET Core DataGrid Product Page

• Telerik UI for ASP.NET Core Video Onboarding Course (Free for trial users and license holders)

• Telerik UI for ASP.NET Core Forums

See Also

• Telerik REPL: Exporting Multiple Grids to Excel
• Exporting to Excel (Overview)
• Client-Side API Reference of the Grid for ASP.NET Core
• Server-Side API Reference of the Grid for ASP.NET Core
• Telerik UI for ASP.NET Core Breaking Changes
• Telerik UI for ASP.NET Core Knowledge Base