Right Align Aggregates Columns and Export Excel

[Lee]

Hi,

I'm aggregating some of my columns, and using the ClientGroupFooterTemplate and aligning some of them using:

<div style='text-align:right'>#= kendo.format('{0:C}', sum)#</div>

 

because the HtmlAttributes doesn't seem to work:

.HtmlAttributes(new { style = "text-align:right;" });

 

So the issue I'm facing is when i Export to Excel it prints the "<div style='text-align:right'></div>" which is unneeded and a massive pain as the Data doesn't format correctly.

 

Is there a better way to achieve what i need and not printing the div tag in the exported excel file?

 

Thanks,
Lee.

 

 

 

 

 

 

[Alex Hajigeorgieva]

Hello, Lee,

To remove the arbitrary HTML from the groupFooterTemplate, the excelExport event needs to be intercepted. You can loop over the rows of the generated workbook and if they are of type "group-footer", extract the text() with the jQuery text() method. Finally, you may use the textAlign property of the cell so the export will match the style of the Kendo UI Grid:

https://dojo.telerik.com/@bubblemaster/oBUnOpIZ

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"){
      for (var ci = 0; ci < row.cells.length; ci++) {
        var cell = row.cells[ci];
        if (cell.value && ($(cell.value).text() != "")) {
          // Use jQuery.fn.text to remove the HTML and get only the text
          cell.value = $(cell.value).text();
          // Set the alignment
          cell.textAlign = "right";
        }
      }
    }
  }

This limitation is described regarding column templates, however, it is valid for all templates at:

https://docs.telerik.com/kendo-ui/controls/data-management/grid/excel-export#limitations

Let me know if you need further help.

P.S. The Html attributes would work for the column, not for the group footer template.  For the group footers, you can use just CSS rules or you could wrap the group footer text in an HTML element and style it:

<style>
.k-group-footer {
  text-align: right;
}
</style>

Kind Regards,
Alex Hajigeorgieva
Progress Telerik

[Lee]

Hi Alex,

Thank you for your quick response, all of the examples you've posted are for the jQuery version, i'm using the MVC version. Is this possible without using the jQuery version?

 

Thanks,
Lee.

[Alex Hajigeorgieva]

Hello, Lee,

You can use the same approach with a Kendo UI Grid for ASP.NET MVC by attaching an event handler for the ExcelExport() event.

@(Html.Kendo().Grid<Kendo.Mvc.Examples.Models.ProductViewModel>()
  .Name("grid")
  .Events(ev=>ev.ExcelExport("onExcelExport"))
)

And then add a script tag with a JavaScript function which executes the suggested logic from my previous post (or you can use another approach to extract the text as you see fit - it does not have to be with the jQuery text() method):

<script>
  function onExcelExport(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") {
            for (var ci = 0; ci < row.cells.length; ci++) {
                var cell = row.cells[ci];
                if (cell.value && ($(cell.value).text() != "")) {
                    // Use jQuery.fn.text to remove the HTML and get only the text
                    cell.value = $(cell.value).text();
                    // Set the alignment
                    cell.textAlign = "right";
                }
              }
           }
        }
     }
  </script>

The built-in ExcelExport is performed on the client and therefore, this is where we have access to it and can modify it. Please try this and let me know if you need further help.

Regards,
Alex Hajigeorgieva
Progress Telerik

[Bryon]

After I insert this Javascript into my code, I set breakpoints, and it goes through the Javascript code, but it no longer calls the C#...

        [HttpPost]
        public ActionResult Excel_Export_Save(string contentType, string base64, string fileName)
        {
            byte[] fileContents = Convert.FromBase64String(base64);
            return File(fileContents, contentType, fileName);
        }

...how do I continue on with the ProxyURL in my MVC Grid?

          .Excel(excel => excel
              .AllPages(true)
              .FileName("Report.xlsx")
              .Filterable(true)
              .ProxyURL(Url.Action("Excel_Export_Save", "Admin"))
          )

...through the Javascript now?

[Anton Mironov]

Hi Bryon,

Thank you for the details provided.

I tried to achieve similar behavior with the following dojo example and the result is the expected one:

• https://dojo.telerik.com/@anton.mironov/OVakiYUJ

The application is using correctly the proxyURL and the change in the excelExport Event handler is applied.

The fastest route to getting you up and running is if you could provide a runnable, isolated, sample project. Examining this project will let us replicate the issue locally and further troubleshoot it.

As this forum post is a duplicate of another forum thread question I am pasting here the same answer. Please keep the communication in one place.

Looking forward to hearing back from you.

Kind Regards,
Anton Mironov