Export Multiple Grids

Environment

Product	Progress® Kendo UI® Grid for jQuery
Operating System	All
Browser	All
Browser Version	All

Description

How can I export two Kendo UI Grids for jQuery in the same Excel document?

Solution

The following example demonstrates how to export two Grids in the same Excel document.

Each Grid is exported in a separate Excel sheet. For additional information about how Excel documents work, refer to the introductory help topic on Excel.

<button id="export" class="k-button"><span class="k-icon k-i-excel"></span>Export to Excel</button>
<div id="products"></div>
<div id="orders"></div>
<script>
  // used to sync the exports
  var promises = [
    $.Deferred(),
    $.Deferred()
  ];

  $("#export").click(function(e){
    // 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"
          });
      });
    });
  });

  $("#products").kendoGrid({
    dataSource: {
      transport: {
        read: {
          url: "https://demos.telerik.com/kendo-ui/service/Products",
          dataType: "jsonp"
        }
      },
      pageSize: 20
    },
    height: 550,
    pageable: true,
    excelExport: function(e) {
      e.preventDefault();

      promises[0].resolve(e.workbook);
    }
  });

  $("#orders").kendoGrid({
    dataSource: {
      type: "odata",
      transport: {
        read: "https://demos.telerik.com/kendo-ui/service/Northwind.svc/Orders"
      },
      pageSize: 20,
      serverPaging: true
    },
    height: 550,
    pageable: true,
    columns: [
      { field:"OrderID" },
      { field: "ShipName", title: "Ship Name" },
      { field: "ShipCity", title: "Ship City" }
    ],
    excelExport: function(e) {
      e.preventDefault();

      promises[1].resolve(e.workbook);
    }
  });
</script>

See Also

• JavaScript API Reference of the Data Grid