Customize Font Family and Font Size in Grid When Exporting to Excel

Environment

Product

Progress® Kendo UI® Grid for jQuery

Description

How can I change the font size and font family of the Excel export in the Grid?

Solution

1. Loop over the Grid cells and set each of them.
2. Add a handler to the excelExport event of the Grid to loop over the workbook.
3. If the font size becomes too large for the row, increase the row height. Note that fontSize is measured in pixels.
4. To change the font name, utilize the fontName property of the sheet row cells.

excelExport: function(e) {
 var sheet = e.workbook.sheets[0];
 for (var i = 0; i < sheet.rows.length; i++) {
   sheet.rows[i].height = 30;
   for (var ci = 0; ci < sheet.rows[i].cells.length; ci++) {
     sheet.rows[i].cells[ci].fontSize = 30;
   }
 }
}

    <script src="https://unpkg.com/jszip/dist/jszip.min.js"></script>


    <div id="grid" ></div>

    <script>
      $("#grid").kendoGrid({
        toolbar: ["excel"],
        excel: {
          allPages: true
        },
        dataSource: {
          type: "odata",
          transport: {
            read: "https://demos.telerik.com/kendo-ui/service/Northwind.svc/Products"
          },
          pageSize: 7
        },
        excelExport: function(e) {
          var sheet = e.workbook.sheets[0];
          for (var i = 0; i < sheet.rows.length; i++) {
            sheet.rows[i].height = 40;
            for (var ci = 0; ci < sheet.rows[i].cells.length; ci++) {
              sheet.rows[i].cells[ci].fontSize = 30;
            }
          }
        },
        pageable: true,
        columns: [
          { width: 300, field: "ProductName", title: "Product Name" },
          { field: "UnitsOnOrder", title: "Units On Order" },
          { field: "UnitsInStock", title: "Units In Stock" }
        ]
      });
    </script>