This is a migrated thread and some comments may be shown as answers.

Right Align Aggregates Columns and Export Excel

3 Answers 415 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Lee
Top achievements
Rank 1
Veteran
Lee asked on 13 Mar 2018, 06:11 AM

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.

 

 

 

 

 

 

3 Answers, 1 is accepted

Sort by
0
Alex Hajigeorgieva
Telerik team
answered on 13 Mar 2018, 11:48 AM
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
Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
0
Lee
Top achievements
Rank 1
Veteran
answered on 14 Mar 2018, 12:41 AM

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.

0
Accepted
Alex Hajigeorgieva
Telerik team
answered on 14 Mar 2018, 06:22 AM
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
Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
Tags
Grid
Asked by
Lee
Top achievements
Rank 1
Veteran
Answers by
Alex Hajigeorgieva
Telerik team
Lee
Top achievements
Rank 1
Veteran
Share this question
or