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 -
And here is the relevant code from my controller class -
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 -
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.
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"))
)
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))
)
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.