Edit this page

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

Environment

Product Progress Kendo UI Grid

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.
  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://cdnjs.cloudflare.com/ajax/libs/jszip/2.4.0/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>
Is this article helpful? Yes / No
Thank you for your feedback!

Give article feedback

Tell us how we can improve this article

close
Dummy