ClientFooterTemplate error after dataSource.query

[Brian]

I'm trying to implement grid state saving/loading (i.e remembering sorting/filtering/page size/etc) but I've run into issues with regard to a grid that implements a ClientFooterTemplate.

The grid is defined as follows:

@(Html.Kendo().Grid<TrendModel>()
        .Name("TrendGrid")
            .Columns(columns =>
                {
                    columns.Bound(o => o.Number).Title("Number")
                        .Width(100)
                        .ClientTemplate("#= NumberTemplate(Number, Id)#");
                    columns.Bound(o => o.Currency).Width(100);
                    columns.Bound(o => o.Estimate).Title("Estimate").Width(105)
                           .Format("{0:n0}")
                           .HtmlAttributes(new { @class = "numeric" })
                            .ClientFooterTemplate("<strong>#= sum #</strong>")
                            .FooterHtmlAttributes(new {@class = "numeric", style = "white-space:nowrap;"});
                })
                .ColumnMenu()
        .Sortable(sortable => sortable
            .AllowUnsort(true)
            .SortMode(GridSortMode.SingleColumn))
            .Pageable(builder => builder
                                    .Input(true)
                                    .Numeric(false)
                                    .PageSizes(new[] {10, 20, 50, 100 }))
        .Pageable()
        .Navigatable()
        .Filterable(f => f
                        .Extra(false)
                        .Operators(o => o
                            .ForString(s => s
                                .Clear()
                                .Contains("Contains")
                                .DoesNotContain("Does not contain")
                                .StartsWith("Starts With")
                                .EndsWith("Ends with")
                                .IsEqualTo("Is Equal To")
                                .IsNotEqualTo("Is Not Equal To")
                    )))
        .Resizable(col => col.Columns(true))
        .Reorderable(x => x.Columns(true))
        .Scrollable(scrollable => scrollable.Enabled(true))
        .HtmlAttributes(new { style = "height:700px; width:calc(100% - 20px);", @class = "report-grid" })
        .DataSource(dataSource => dataSource
           .Ajax()
           .Batch(true)
           .ServerOperation(false)
           .PageSize(20)
           .Read(read => read.Action(@ViewBag.ActionName, "Trend", new { area = "Foo" }).Type(HttpVerbs.Post))
           .Sort(sort => sort.Add("Number").Ascending())
           .Aggregates(agg => {
                agg.Add(est => est.Estimate).Sum();
           })
           .Model(model => model.Id(p => p.Id))
           .Events(events => events.RequestEnd("highlightFiltered")))
        )

And the code that sets the state is:

$(document).ready(function () {
    var grid = $("#TrendGrid").data("kendoGrid");
    var data = { "pageSize": 20, "sort": [{ "field": "Currency", "dir": "asc", "compare": null }], "group": [] };
    grid.dataSource.query(data);
    grid.dataSource.page(1); //if you don't explicitly set to page one the paging is messed up
}

However, when that runs I get an error "0x800a138f - Microsoft JScript runtime error: Object expected" on the because data.Estimate is undefined on the following anonymous block:

function anonymous(data) {
var o,e=kendo.htmlEncode;with(data.Estimate){o=''+( sum )+'</strong>';}return o;
}

I was having a similar issue with another grid that had a ClientGroupFooterTemplate with "sum" being undefined but I was able to wrap a check around that to handle the error.  I'm guessing the problem is caused by the data binding not being done before the template is rendered, but that's just a guess.

Any ideas what I'm missing here?

[Daniel]

Hello Brian,

The query method overrides all state values so the aggregates will not be calculated when using the method to without setting the aggregate option. The page method should also not be called as this will result in duplicate requests. You should use only the query method and pass all the needed values:

$(document).ready(function () {
    var grid = $("#TrendGrid").data("kendoGrid");
    var data = {
        page: 1,
        "pageSize": 20,
        "sort": [{ "field": "Currency", "dir": "asc", "compare": null }],
        "group": [],
        aggregate: grid.dataSource.aggregate()
    };
    grid.dataSource.query(data);
});

 The initial binding should also be prevented by using the AutoBind method:

Html.Kendo().Grid<TrendModel>()
    .Name("TrendGrid")
    .AutoBind(false)
    ...

Regards,
Daniel
Telerik

[Brian]

Thanks Daniel.  That makes perfect sense and your suggested fix works perfectly.