Right Align Aggregates Columns and Export Excel

4 posts, 1 answers
  1. Lee
    Lee avatar
    53 posts
    Member since:
    Feb 2018

    Posted 13 Mar Link to this post

    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.

     

     

     

     

     

     

  2. Alex Hajigeorgieva
    Admin
    Alex Hajigeorgieva avatar
    457 posts

    Posted 13 Mar Link to this post

    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.
  3. Lee
    Lee avatar
    53 posts
    Member since:
    Feb 2018

    Posted 13 Mar Link to this post

    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.

  4. Answer
    Alex Hajigeorgieva
    Admin
    Alex Hajigeorgieva avatar
    457 posts

    Posted 14 Mar Link to this post

    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.
Back to Top