Merging footer column & apply #,##0.00 format

2 posts, 0 answers
  1. Patrick
    Patrick avatar
    19 posts
    Member since:
    Jul 2011

    Posted 08 Jun 2020 Link to this post

    I would like to merge multiple footer column to get a right-aligned column footer to span or merge a couple columns to the left. I didn't find any post like that in this forum. I came across this approach for Kendo UI for jQuery:

    Since it described using styles to achieve the effect of merging footer cells, I figured it would work for Kendo UI for MVC as well. Since I don't want/need any cell boarders in the footer, I set the .k-footer-template td border to none. I put the style block below just after my @model declaration line in the view.

        .k-footer-template td {
         border: none;
        .k-footer-template td:nth-child(4) {
            overflow: visible;
            white-space: nowrap;



    However, the above has no effect on the appearance; I still see each footer cell's border and my sum total of the 4th column (assuming td:nth-child is zero-based) is limited to its cell. Why are the above styles not being applied?


    2nd request for help: I want to format the sum total of a column with comma delineated number formatting: #,##0.00 

    Here is my client footer template:

    .ClientFooterTemplate("<div style='float: right'>#= kendo.toString(sum, '0,000.00') #</div>");  /*#,##0.00 didn't work; nothing appears in the cell*/



    As you can see, I ended up using 0,000.00 instead of #,##0.00. The latter works in c# formatting of numeric strings, but I'm guessing the # symbol is interfering with the #= # syntax.  My work-around isn't acceptable as it shows "0," in front of numbers less than 1,000 (e.g., 0,999.99). How can I apply a custom number format such as #,##0.00?

  2. Ivan Danchev
    Ivan Danchev avatar
    2187 posts

    Posted 10 Jun 2020 Link to this post

    Hello Patrick,

    The footer template of column is rendered within a cell (td), which is in a row (tr) within the table the Grid renders. So the style float: right would have effect only within the boundaries of that specific cell where the column's client template is rendered. So floating the template will move it within the cell, and not at display it at the right side of the whole row, because the cell is the container of the template.

    So if you want to show the template to the right hand side of the row, I would suggest you to consider an alternative approach. Set the template to the last column, event if it is not the one that contains the data you want to display in the template. There is a way to get the data from another column. Here's an example:

    .Columns(columns =>
    	columns.Bound(model => model.OrderID).Filterable(false);
    	columns.Bound(model => model.Freight);
    	columns.Bound(model => model.OrderDate).Format("{0:MM/dd/yyyy}");
    	columns.Bound(model => model.ShipName);
    	columns.Bound(model => model.ShipCity).ClientFooterTemplate("<div style='float: right; '>#=kendo.toString(data.Freight.sum, '\\#\\#,\\#')#</div>");

    Highlighted in green is the syntax that allows you to access the data of another column. So in this case I am showing the template for last column "ShipCity" but the data is that of the "Freight" column.

    Additionally, the code snippet shows how to escape the hashtag "#" symbols when applying formatting within the template:




    Ivan Danchev
    Progress Telerik

    Progress is here for your business, like always. Read more about the measures we are taking to ensure business continuity and help fight the COVID-19 pandemic.
    Our thoughts here at Progress are with those affected by the outbreak.
Back to Top