0
votes

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.

1

1 Answers

1
votes

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);     
})