Rank 1
We have a datasource that has groups and aggregates specified.
dataSourcePipeline = new kendo.data.DataSource({ transport: { read: { url: "/Market/Pipeline", dataType: "json", type: "get", cache: true, data: { zip: zip } } }, group: { field: "Stage", dir: "desc", aggregates: [ { field: "PropertyName", aggregate: "count" }, { field: "Area", aggregate: "sum"}] }, aggregate: [ { field: "PropertyName", aggregate: "count" }, { field: "Area", aggregate: "sum" } ], sort: { field: "Area", dir: "desc" }});We have a grid bound to that datasource and is configured to allow grouping. Further, we have specified a groupFooterTemplate for one of the columns that displays the aggregate.
$("#marketPipeline").kendoGrid({ dataSource: dataSourcePipeline, groupable: true, scrollable: false, sortable: { mode: "multiple" }, filterable: true, columns: [ { field: "PropertyName", title: "Property Name", template: '<div style="cursor: pointer;" class="pipelinePopupTrigger" rel="#=ID#"><img src="/Content/images/mapIcon.png" height="20" style="cursor: pointer; padding-right: 10px;" title="Show on map" onClick="CenterMap(#=Lat#,#=Lng#,\'PIPELINE\',\'#=ID#\')"/> #=PropertyName#</div>', footerTemplate: "Total Count: #=count#", groupFooterTemplate: "Count: #=count#" }, { field: "Address", title: "Address" }, { field: "City", title: "City" }, { field: "ZipCode", title: "Zip Code", width: 100, footerTemplate: "<span style='float:right'>Total Area:</span>", groupFooterTemplate: "<span style='float:right'>Area</span>" }, { field: "Area", title: "Area", template: '<span style="float:right">#= kendo.toString(Area,"N0") #</span>', width: 100, footerTemplate: "<span style='float:right'>#= kendo.toString(sum,'N0') #</span>", groupFooterTemplate: "<span style='float:right'>#= kendo.toString(sum,'N0') #</span>" }, { field: "Subclass", title: "Sub-Class" }, { field: "Stage", title: "Stage", width: 200 } ] });Everything works well until the user removes all groups for the grid. Once they drag a new column to the group area, the grid fails with this error:
count is not defined
/Scripts/kendo/kendo.web.min.js
Line 10
Thoughts?
11 Answers, 1 is accepted
In order to use aggregates and drag & drop grouping functionality you should also define the appropriate aggregate function(s) on each column:
{ field: "UnitsInStock", title: "Units In Stock", aggregates: ["min", "max", "count"], footerTemplate: "<div>Min: #= min #</div><div>Max: #= max #</div>", groupHeaderTemplate: "Units In Stock: #= value # (Count: #= count#)"}Greetings,
Rosen
the Telerik team
Rank 1
Can I have totals in the footer of the grid without have any group, just totals for numeric columns??
Thanks
Rank 1
Rank 1
Many thanks
Rank 1
thanks
Rank 1
Could you check what mistake I am making in the following code? This works well if I assign the datasource to the grid instead of using MVVM.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Untitled Page</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="http://cdn.kendostatic.com/2012.1.322/js/kendo.all.min.js"></script>
<link href="http://cdn.kendostatic.com/2012.1.322/styles/kendo.common.min.css" rel="stylesheet" />
<link href="http://cdn.kendostatic.com/2012.1.322/styles/kendo.default.min.css" rel="stylesheet" />
</head>
<body>
<div id="container">
<div data-role="grid"
data-columns='[ "Name", { "field" : "Percent", "title" : "Percent", "aggregates": "sum", "footerTemplate": "#=sum#" }, "EntryType" ]'
data-groupable="true"
data-bind="source: data" id="grid">
</div>
</div>
<script type="text/javascript">
var timeEntryValues = [{
Name: "AD5110PRJ", Percent: 0.8, IsTagged: true, EntryType: "Project"
},
{
Name: "AD7187PRJ", Percent: 0.6, IsTagged: true, EntryType: "Project"
},
{
Name: "AD1234PRJ", Percent: 0.4, IsTagged: true, EntryType: "Project"
},
{
Name: "Conference", Percent: 0.1, IsTagged: true, EntryType: "NonProject"
},
{
Name: "Not Working", Percent: 0.2, IsTagged: true, EntryType: "NonProject"
},
{
Name: "Customer Meeting", Percent: 0.3, IsTagged: true, EntryType: "NonProject"
}];
$(document).ready(function () {
var ds = new kendo.data.DataSource({
data: timeEntryValues,
group: {
field: "EntryType",
dir: "asc"
},
aggregate: [{
field: "Percent",
aggregate: "sum"
}],
change: function (e) {
viewModel.data = ds.view();
kendo.bind($("#container"), viewModel);
}
});
var viewModel = new kendo.data.ObservableObject({
data: []
});
ds.read();
});
</script>
</body>
</html>
Rank 1
Thanks,
Rank 1
In my particular case, I am using a datasource, fetching from a database using ajax. The data rows are using the observable pattern (MVVM). And I have a Count aggregate configured for the first column (tho it doesn't matter which column nor aggregate func). Everything is great when there are rows - no errors and the footer row is shown.
However, in any case that results in the rows being empty, the above error is returned and processing halts. This can happen when the datasource is reading. This can happen after the last row is removed and then the sync method is called. I believe there is one more scenario too. This is a serious issue and trashing the entire application (unless I remove all footers which is a requirement so not an option).
I haven't included any code because it is all boiler-plate config (in terms of the grid/datasource). Does anyone have this working for them? And can Kendo Support respond to this?
Thanks!
Mike
This issue will be fixed for the next official release of Kendo UI which is due in July.
All the best,Rosen
the Telerik team
Rank 1
This forum thread is about 2 years old. Most probably the information and issues discussed here are outdated.
In case you need assistance please open new thread with the needed details that will help us to understand/reproduce the problem and we will do our best to help.
Thank you in advance.
Regards,
Alexander Valchev
Telerik