Merging footer column & apply #,##0.00 format

[Patrick]

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: https://docs.telerik.com/kendo-ui/knowledge-base/grid-merge-footer-cells

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.

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

 

 

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?

[Ivan Danchev]

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:

##,#

becomes:

\\#\\#,\\#

Regards,
Ivan Danchev
Progress Telerik