Telerik MVC grid footer templace - telerik-grid

Question

I have a telerik grid and would like to customize the footer template in such a way that the count is right under the sum like this:
Total: $XXXXXXX
Count: XXXXX
#model List
#(Html.Telerik().Grid(Model)
.Name("grd")
.NoRecordsTemplate(" ")
.Resizable(resizing => resizing.Columns(false))
.Scrollable(c => c.Enabled(true).Height(300))
.Footer(false)
.Columns(columns =>
{
columns.Bound(o => o.Number)
.Aggregate(ag => ag.Count());
columns.Bound(o => o.TotalCost)
.Aggregate(ag => ag.Sum())
.ClientFooterTemplate(
"<div>Total: <#= $.telerik.formatString('{0:c}', Sum) #></div>"
);
})
.DataBinding(db => db.Ajax().Select("getList", "Home"))
.Pageable()
.Scrollable()
.Footer(true)
.HtmlAttributes(new { #class = ".t-grid .t-status" })
)
Thanks for your help.

Answer 1

You could try the following. Please be aware it is untested:
.Resizable(resizing => resizing.Columns(false))
.Scrollable(c => c.Enabled(true).Height(300))
.DataBinding(db => db.Ajax().Select("getList", "Home"))
.Pageable()
.Columns(columns =>
{
columns.Bound(o => o.Number)
.Aggregate(ag => ag.Count())
.FooterTemplate(result => (result.Count == null ? "0" : result.Count.Format("{0:N0}")));
columns.Bound(o => o.TotalCost)
.Aggregate(ag => ag.Sum())
.FooterTemplate(result => (result.Sum == null ? "0.00" : result.Sum.Format("{0:N2}")));
})
If you wanted to see the Sum and Count on the footer beneath the same column:
.NoRecordsTemplate("No records available!")
.Resizable(resizing => resizing.Columns(false))
.Scrollable(c => c.Enabled(true).Height("auto"))
.DataBinding(db => db.Ajax().Select("getList", "Home"))
.Pageable()
.Columns(columns =>
{
columns.Bound(o => o.TotalCost)
.HtmlAttributes(new { style = "text-align:right" })
.Format("{0:N2}")
.Aggregate(ag => ag.Sum().Count())
.FooterHtmlAttributes(new { style = "text-align:right" })
.FooterTemplate(result => string.Format("Total: ${0:N2}, Count: {1:N0}", result.Sum , result.Count))
.Width(60);
})