Rank 1
I have a Grid which generates its columns automatically. Grid's column counts changes with SQL. How can I add aggregate
function to these dynamic columns? I'd like to show these in footer. Where should I control it, onitemdatabound or something?
4 Answers, 1 is accepted
Each auto-generated column causes the grid to trigger its ColumnCreated event where you can access the column (e.Column) and set its Aggregate function.
I hope this helps.
Best wishes,Tsvetoslav
the Telerik team
Watch a video on how to optimize your support resource searches and check out more tips on the blogs.
Follow the status of features or bugs in PITS and vote for them to affect their priority.
Rank 2
Hi,
Could you explain how I have this agregatefunction SumFunction in the Group Footer of the column which is a monetary column
I should see something like $200 since I have 2 rows with the $100 each
I tried this but there's nothing shown on the GROUP FOOTER
void rgvTest_AutoGeneratingColumn(object sender, Telerik.Windows.Controls.GridViewAutoGeneratingColumnEventArgs e) { if(e.Column.UniqueName == "Property2") e.Column.AggregateFunctions.Add(new SumFunction() { Caption = "", ResultFormatString = "C2" }); }
Rank 1
Hi,
Here is the complete code for dyanmic grid with dynamic column and aggregate.
$.ajax({
url: ",
datatype: "JSON",
type: "GET",
success: function (result) {
var items = $.parseJSON(result)[0];
var arrCol = [];
var arrAgg = [];
for (var index in items)
{
arrCol.push({ field: index, format: "{0:0}", aggregates: ["sum"], footerTemplate: "#= kendo.toString(sum, '0.00') #" });
arrAgg.push({ field: index, aggregate: "sum" });
}
console.log(arrAgg);
if (result.Result.length > 0) {
var dataSource = new kendo.data.DataSource({
data: $.parseJSON(result.Result),
group: { field: "Category" },
aggregate: arrAgg
});
$('#divgrid').html("");
$("#divgrid").kendoGrid({
dataSource: dataSource,
height: "auto",
scrollable: false,
sortable: true,
groupable: false,
columns: arrCol
});
Rank 2
<html>
<head>
<meta charset="utf-8">
<title>GCI Kendo UI R & D</title>
<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2015.2.805/styles/kendo.common.min.css">
<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2015.2.805/styles/kendo.rtl.min.css">
<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2015.2.805/styles/kendo.default.min.css">
<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2015.2.805/styles/kendo.dataviz.min.css">
<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2015.2.805/styles/kendo.dataviz.default.min.css">
<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2015.2.805/styles/kendo.mobile.all.min.css">
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://kendo.cdn.telerik.com/2015.2.805/js/kendo.all.min.js"></script>
</head>
<body>
<div id="grid"></div>
<br><br><br>
<div id="dialog" style="display:none">
<input type="checkbox" name="summary" id="ch1" checked value="sum" /> Sum
<input type="checkbox" name="summary" id="ch2" checked value="count" /> Count
<input type="checkbox" name="summary" id="ch3" value="average" /> Average
<input type="checkbox" name="summary" id="ch4" checked value="min" /> Min
<input type="checkbox" name="summary" id="ch5" checked value="max" /> Max
<button id="clkok"> OK</button>
</div>
<script>
var locations = [
{
"id": 1,
"name": "Maui",
"country": "USA",
"description": "The second largest Hawaiian island and is known as the Valley Isle",
"imagePath": "content/images/locations/maui.jpeg",
"votes": 20
},
{
"id": 2,
"name": "Dubai",
"country": "UAE",
"description": "Dubai is a business and cultural center for the middle east",
"imagePath": "content/images/locations/dubai.jpeg",
"votes": 18
}
];
var dataSource = new kendo.data.DataSource({
data: locations,
aggregate: [
{ field: "country", aggregate: "average"}
]
});
var fieldval='';
$("#clkok").click(function(){
var field=fieldval;
$("#dialog").hide();
var lnColIndex = eval('$($("[data-field='+ field +']")[0]).attr("data-index")');
var lbAggExists=false;
if (dataSource.aggregate().length>0)
{
for(var lnAgg=0;lnAgg<=dataSource.aggregate().length-1;lnAgg++)
{
if (dataSource.aggregate()[lnAgg].field == field){
lbAggExists=true;
}
}
}
if (lbAggExists==false) {
dataSource.aggregate().push({ field: field, aggregate: "count" });
dataSource.aggregate().push({ field: field, aggregate: "min" });
dataSource.aggregate().push({ field: field, aggregate: "max" });
dataSource.aggregate().push({ field: field, aggregate: "sum" });
dataSource.read();
var lsSumText=" Count : " + eval("dataSource.aggregates()."+field+".count");
lsSumText += " Min : " + eval("dataSource.aggregates()."+field+".min");
lsSumText += " Max : " + eval("dataSource.aggregates()."+field+".max");
lsSumText += " Sum : " + eval("dataSource.aggregates()."+field+".sum");
loAggJSON.push({ "colindx": lnColIndex, "coltext": lsSumText });
if (loAggJSON.length>0)
{
for(var lnAgg=0;lnAgg<=loAggJSON.length-1;lnAgg++)
{
$($(".k-footer-template").children()[loAggJSON[lnAgg].colindx]).text(loAggJSON[lnAgg].coltext);
}
}
}
else {
}
});
var loAggJSON=[];
$("#grid").kendoGrid({
dataSource: dataSource,
columns: [
{ field: "id",title: "ID"},
{ field: "name",title: "Name"},
{ field: "country",title: "Country"},
{ field: "description",title: "Description"},
{ field: "votes",title: "Votes"},
],
columnMenu: true,
columnMenuInit: function (e) {
var menu = e.container.find(".k-menu").data("kendoMenu");
var field = e.field;
menu.append({
text: "Summary"
});
menu.bind("select", function (e) {
var menuText = $(e.item).text();
if (menuText == "Summary") {
$("#dialog").show();
fieldval=field;
}
});
}
});
</script>
</body>
</html>