Grid Excel Export - set cell to Wrap Text

1 Answer 816 Views

Grid

David asked on 07 Jul 2022, 04:54 PM

How do you get a column data to Wrap Text when exporting to excel. When the column has a fixed width it doesn't set the cell to Wrap Text

I want it to instead set the cell to Wrap Text

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <title>Kendo UI Snippet</title>

    <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2022.2.621/styles/kendo.default-v2.min.css"/>

    <script src="https://code.jquery.com/jquery-1.12.3.min.js"></script>
    <script src="https://kendo.cdn.telerik.com/2021.3.1207/js/jszip.min.js"></script>
    <script src="https://kendo.cdn.telerik.com/2021.3.1207/js/kendo.all.min.js"></script>
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2021.3.1207/styles/kendo.common.min.css">
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2021.3.1207/styles/kendo.rtl.min.css">
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2021.3.1207/styles/kendo.default.min.css">
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2021.3.1207/styles/kendo.mobile.all.min.css">
<script src="https://kendo.cdn.telerik.com/2021.3.1207/js/angular.min.js"></script>
</head>
<body>
  
<div id="grid"></div>
<script>
    $("#grid").kendoGrid({
        toolbar: ["excel"],
        
        dataSource: {
          type: "odata",
          transport: {
              read: "https://demos.telerik.com/kendo-ui/service/Northwind.svc/Products"
          },
          pageSize: 7
        },
        pageable: true,
        columns: [
            { width: 100, field: "ProductName", title: "Product Name" },
            { width: 300, field: "UnitPrice", title: "Unit Price" },
            { field: "UnitsOnOrder", title: "Units On Order" },
            { field: "UnitsInStock", title: "Units In Stock" }
        ]
    });
</script>
</body>
</html>

1 Answer, 1 is accepted

answered on 08 Jul 2022, 09:05 AM

Hello David,

I have already replied to your support thread but I will post it here as well so others can benefit from it.

You could wrap a specific cell and adjust the columns/rows settings in the "excelExport" event of the Grid.

- Use thesheets.columns.width and sheets.columns.autoWidth options to adjust the default column width;

- Use the sheets.rows.height to decrease the row's height;

- Set the sheets.rows.cells.wrap to "true" to wrap the cell's content.

excelExport: function(e) {
          var sheet = e.workbook.sheets[0]; //get the 1st sheet
          var columns = e.workbook.sheets[0].columns; //get the columns in the sheet

          columns.forEach(function (column) { //loop through the columns
            column.width = 100; //set a specific width to the column
            column.autoWidth = false; //disable the property "autoWidth"
          });

          for (var rowIndex = 1; rowIndex < sheet.rows.length; rowIndex++) { //loop through the rows
            var row = sheet.rows[rowIndex];
            row.height = 50; //adjsut the height of each row
            var cell = row.cells[0]; //select a specified cell in the row (i.e. the cell in column 4)
            cell.wrap = true; //wrap the cell content
          }
        }

Dojo demo: https://dojo.telerik.com/oKenEHoW

Regards,
Nikolay
Progress Telerik

The Premier Dev Conference is back!

Coming to you live from Progress360 in-person or on your own time, DevReach for all. Register Today.