This is a migrated thread and some comments may be shown as answers.

ClientFooterTemplate error after dataSource.query

2 Answers 72 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Brian
Top achievements
Rank 1
Brian asked on 22 Jan 2014, 10:13 PM
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?

2 Answers, 1 is accepted

Sort by
0
Daniel
Telerik team
answered on 24 Jan 2014, 03:38 PM
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
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Brian
Top achievements
Rank 1
answered on 24 Jan 2014, 05:04 PM
Thanks Daniel.  That makes perfect sense and your suggested fix works perfectly.
Tags
Grid
Asked by
Brian
Top achievements
Rank 1
Answers by
Daniel
Telerik team
Brian
Top achievements
Rank 1
Share this question
or