Export Strikethrough Text to Excel

Environment

Product Version	2022.1.119
Product	Progress® Kendo UI® Grid for jQuery

Description

Certain values in my Grid have a strikethrough decoration applied with the <s></s> HTML tag. When the Grid is exported to Excel, the text decoration is missing. How can I export the text without losing the strikethrough?

Solution

This approach appends a unicode character to the value of the cell. The exported text isn't just decorated, the strikethrough will be a part of the cell value.

1. Use a template to render the strikethrough text in the Grid.
2. Handle the excelExport event of the Grid.
3. Inside the excelExport event, generate an HTML string by using the template.
4. Use a Regular expression to find if the cell value has the <s></s> tags.
5. Append the \u0336 unicode character before each character of the value.
6. Update the cell value with the strikethrough text.

    <div id="grid"></div>
    <script>
      $("#grid").kendoGrid({
        toolbar: ["excel"],
        excel: {
          allPages: true
        },
        columns: [
          { field: "ProductName", title: "Product Name" },
          { field: "UnitPrice", title: "Price", template: '#= UnitPrice % 2 ? "<s>"+UnitPrice+"</s>" : UnitPrice #' }
        ],
        pageable: true,
        dataSource: {
          transport: {
            read: {
              url: "https://demos.telerik.com/kendo-ui/service/products",
              dataType: "jsonp"
            }
          },
          pageSize: 10
        },
        excelExport: function(e) {
          var element = document.createElement('div');
          var sheet = e.workbook.sheets[0];
          var template = kendo.template(this.columns[1].template);

          for (var i = 1; i < sheet.rows.length; i++) {
            var row = sheet.rows[i];

            var dataItem = {
              UnitPrice: row.cells[1].value
            };

            element.innerHTML = template(dataItem);
            // Find Grid values in the Price column that are between <s></s> tags.
            let strikeMatch = element.innerHTML.match(/<s>(.*?)<\/s>/);
            if(strikeMatch) {
              // Create a strikethrough text.
              let strike = strikeThrough(strikeMatch[1]);
              // Update the cell value.
              row.cells[1].value = strike;
            }
          }
        }
      });

      function strikeThrough(text) {
        return text.split("").map(function(char) {
          return "\u0336" + char;
        }).join("");
      }
    </script>