Remove HTML from Excel generated from Kendo Grid

Question

I'm using the following code to load grid data and for removing the HTML from the footer and group footer in Excel. I'm using the recommended code only but somehow it's not working and there is no change in result as well.

var GridParams = function(fromDate, toDate) {
  var groupSortDirection = groupByPaymentDate.value();
  return {
    id: divReportGrid,
    showGroup: true,
    serverSorting: false,
    url: formUrls.gridUrl,
    columns: columns(),
    pageSize: 50,
    showReport: true,
    fileName: "Report.xlsx",
    toolbar: ["excel"],
    ExcelExport: function(e) {
      var rows = e.workbook.sheets[0].rows;
      for (var ri = 0; ri < rows.length; ri++) {
        var row = rows[ri];
        if (row.type == "group-footer" || row.type == "footer") {
          for (var ci = 0; ci < row.cells.length; ci++) {
            var cell = row.cells[ci];
            if (cell.value) {
              // Use jQuery.fn.text to remove the HTML and //get only the text
              cell.value = $(cell.value).text();
              // Set the alignment
              cell.hAlign = "right";
            }
          }
        }
      }
    },
    data: {
      "fromDate": fromDate,
      "toDate": toDate,
      "groupSortDirection": groupSortDirection
    },
    group: [{
      field: "PaymentDate",
      dir: groupSortDirection,
      aggregates: [
        // calculate max price
        {
          field: "CasTotal",
          aggregate: "sum"
        },
        {
          field: "ChkTotal",
          aggregate: "sum"
        },
        {
          field: "AmxTotal",
          aggregate: "sum"
        },
        {
          field: "VisTotal",
          aggregate: "sum"
        },
        {
          field: "MasTotal",
          aggregate: "sum"
        },
        {
          field: "CcrTotal",
          aggregate: "sum"
        },
        {
          field: "GcrTotal",
          aggregate: "sum"
        },
        {
          field: "DisTotal",
          aggregate: "sum"
        },
        {
          field: "CckTotal",
          aggregate: "sum"
        },
        {
          field: "SapTotal",
          aggregate: "sum"
        },
        {
          field: "IckTotal",
          aggregate: "sum"
        },
        {
          field: "Total",
          aggregate: "sum"
        }
      ]
    }]
  };
};

Answer 1

In your demo, the jQuery text() function is causing a javascript error. Use a regular expression replacement instead:

    $("#grid").kendoGrid({
        toolbar: ["excel"],
        excelExport: function(e) {
          var rows = e.workbook.sheets[0].rows;
          for (var ri = 0; ri < rows.length; ri++) {
            var row = rows[ri];
            if (row.type == "group-footer" || row.type == "footer") {
              for (var ci = 0; ci < row.cells.length; ci++) {
                var cell = row.cells[ci];
                if (cell.value) {
                  if (cell.value.indexOf("<div") > -1) {
                    var val = cell.value.replace(/<(?:.|\n)*?>/gm, '');
                    cell.value = val;
                  }
                  cell.hAlign = "right";
                }
              }
            }
          }
        },
        excel: {
            fileName: "Kendo UI Grid Export.xlsx",                  
            proxyURL: "https://demos.telerik.com/kendo-ui/service/export",
            filterable: true
        },

Updated DEMO