Grouping and Aggregates in grid - multiple problems in IE8

[Mohit]

I'm running into separate problems with setting up grouping and aggregates with the Kendo Grid in an asp.net mvc 3 project (using razor/fluent syntax). The problems exist even in the sample code provided in the Kendo grid demo page. I have the commercial version of Kendo 2013 Q1 release. I'm using jquery 1.9.1 version.

Here is my grid configuration in razor -

@(Html.Kendo().Grid<ProductViewModel>()
    .Name("productsGrid")
    .Columns(columns =>
    {
        columns.Bound(p => p.ProductName)
            .ClientFooterTemplate("Total Count: #=count#")
            .ClientGroupFooterTemplate("Count: #=count#");
        columns.Bound(p => p.UnitPrice).Format("{0:C}")
            .ClientFooterTemplate("<div>Sum: #= sum #</div>")
            .ClientGroupFooterTemplate("<div>Sum: #= sum #</div>");
        columns.Bound(p => p.UnitsOnOrder)
            .ClientFooterTemplate("Average: #=average#")
            .ClientGroupFooterTemplate("Average: #=average#");
        columns.Bound(p => p.UnitsInStock)
            .ClientGroupHeaderTemplate("Units In Stock: #= value # (Count: #= count#)")
            .ClientFooterTemplate("<div>Min: #= min #</div><div>Max: #= max #</div>");
    })
    .DataSource(dataSource => dataSource
        .Ajax()
        .Aggregates(aggregates =>
        {
            aggregates.Add(p => p.UnitsInStock).Min().Max().Count();
            aggregates.Add(p => p.UnitsOnOrder).Average();
            aggregates.Add(p => p.ProductName).Count();
            aggregates.Add(p => p.UnitPrice).Sum();
        })
         .Group(groups => groups.Add(p => p.Category))
        .Read(read => read.Action("Products", "Home"))
    )

And here is the relevant code from my controller class -

public ActionResult Products([DataSourceRequest] DataSourceRequest request)
        {
            return Json(GetProducts().ToDataSourceResult(request));
        }

        private IEnumerable<ProductViewModel> GetProducts()
        {
            var products = new List<ProductViewModel>();
            products.Add(new ProductViewModel() { Category = "Food", ProductName = "Pasta", UnitPrice = 39.00m, UnitsInStock = 1, UnitsOnOrder = 5 });
            products.Add(new ProductViewModel() { Category = "Food", ProductName = "Salami", UnitPrice = 21.00m, UnitsInStock = 2, UnitsOnOrder = 3 });
            products.Add(new ProductViewModel() { Category = "Food", ProductName = "Bratwurst", UnitPrice = 39.00m, UnitsInStock = 2, UnitsOnOrder = 7 });
            return products.AsEnumerable();
        }

Problem #1: Grouping - Grouping does not work in IE8. I get a javascript error from kendo js file (i've tried both kendo.web.js or kendo.all.js, instead of the minified versions to see the full method. Screenshot attached.) and the grid get stuck on "loading". It runs fine on IE9 and Chrome but not in IE8 or IE9-compatibility mode. I've also tried downgrading my jquery from 1.9.1 to 1.8.x or even 1.7.x and gives the same error.

I really need to get it working in IE8. If you need, i can send you the full sample code/project to reproduce this.

To get around this grouping problem, I tried to change my approach to not use an ajax call but pass the fully populated model to the View. After removing the .Ajax() config and adding .Server() config setting in the datasource, what I found that is that the grouping starts working in IE8 (and remains functional in other browser versions)  but the aggregates stop adding up - they always show a value of 0 after that. Which brings me to my second problem.

Problem #2: Aggregates  - Aggregates functions not working when not using ajax call to read data. This is a consistent problem no matter which browser version I'm using IE8/9 or Chrome. The grid configuration is very similar to the above - 

@model IEnumerable<ProductViewModel>
@(Html.Kendo().Grid(Model)
    .Name("productsGrid")
    .Columns(columns =>
    {
        columns.Bound(p => p.ProductName)
            .ClientFooterTemplate("Total Count: #=count#")
            .ClientGroupFooterTemplate("Count: #=count#");
        columns.Bound(p => p.UnitPrice).Format("{0:C}")
            .ClientFooterTemplate("<div>Sum: #= sum #</div>")
            .ClientGroupFooterTemplate("<div>Sum: #= sum #</div>");
        columns.Bound(p => p.UnitsOnOrder)
            .ClientFooterTemplate("Average: #=average#")
            .ClientGroupFooterTemplate("Average: #=average#");
        columns.Bound(p => p.UnitsInStock)
            .ClientGroupHeaderTemplate("Units In Stock: #= value # (Count: #= count#)")
            .ClientFooterTemplate("<div>Min: #= min #</div><div>Max: #= max #</div>");
    })
    .DataSource(dataSource => dataSource
        .Server()
        .Aggregates(aggregates =>
        {
            aggregates.Add(p => p.UnitsInStock).Min().Max().Count();
            aggregates.Add(p => p.UnitsOnOrder).Average();
            aggregates.Add(p => p.ProductName).Count();
            aggregates.Add(p => p.UnitPrice).Sum();
        })
         .Group(groups => groups.Add(p => p.Category))
    )

When i use this configuration, my grid rows show correctly and my group is created but the aggregate values are always zero. Is there some additional configuration I need to set in the grid?

Ideally I would like to fix both problems # 1 & #2 but I'd be happy if I can find a fix for problem #1 at least.

[Petur Subev]

Hello Mohit,

We are not aware of issues related to grouping. I assume that you have tested the Grouping with Internet Explorer 9 or 10 with compatibility mode / document mode changed to IE 8. However we do not support such compatibility changes. 
On our side the the demos for grouping are working fine with the original version of IE8. If the problem that you experience is reproduced in the market version of IE8 (once again not compatibility changes) please send us the sample project so we can investigate further.

Regarding aggregates - when using server binding you need to use Templates, not client template. Here is the demo from the Examples:

@model IEnumerable<Kendo.Mvc.Examples.Models.Product>

@(Html.Kendo().Grid(Model)
    .Name("Grid")
    .Columns(columns =>
    {
        columns.Bound(p => p.ProductName)
            .FooterTemplate(@<text>Total Count: @item.Count</text>)
            .GroupFooterTemplate(@<text>Count: @item.Count</text>);
        columns.Bound(p => p.UnitPrice).Format("{0:C}");
        columns.Bound(p => p.UnitsOnOrder)
            .FooterTemplate(@<text>Average: @item.Average</text>)
            .GroupFooterTemplate(@<text>Average: @item.Average</text>);
        columns.Bound(p => p.UnitsInStock)
            .FooterTemplate(@<text><div>Min: @item.Min </div><div>Max: @item.Max </div></text>)
            .GroupHeaderTemplate(@<text>@item.Title: @item.Key (Count: @item.Count)</text>);
    })
    .Pageable()
    .Sortable()
    .DataSource(dataSource => dataSource
        .Server()
        .Aggregates(aggregates =>
        {
            aggregates.Add(p => p.UnitsInStock).Min().Max().Count();
            aggregates.Add(p => p.UnitsOnOrder).Average();
            aggregates.Add(p => p.ProductName).Count();
            aggregates.Add(p => p.UnitPrice).Sum();
        })
        .Group(groups => groups.Add(p => p.UnitsInStock))
        .Read(read => read.Action("ServerAggregates", "Grid"))
    )
)

Kind Regards,
Petur Subev
the Telerik team

[Mohit]

Thanks Petur - using Templates (instead of client side templates) solved that problem!