My kendoGrid have two group and i sum in groupfooterTempalte, but it don't know which group follow.And i don't know post problem to kendo forum :((
Thanks for watch,
My example
http://dojo.telerik.com/urojO
$("#grid").kendoGrid({
columns: [
{ field: "vung" },
{ field: "cn" },
{ field: "BT",
groupFooterTemplate: "total: #= sum #",
aggregates: ["sum"]
}
],
dataSource: {
data: [
{ vung: "v1", cn: "TIN1", BT: 21 },
{ vung: "v1", cn: "TIN1", BT: 17 },
{ vung: "v1", cn: "TIN2", BT: 22 },
{ vung: "v1", cn: "TIN2", BT: 13 },
{ vung: "v2", cn: "PN1", BT: 13 },
{ vung: "v2", cn: "PN1", BT: 15 }
],
group: [{ field: "vung", aggregates: [ { field: "BT", aggregate: "sum" }] },
{ field: "cn", aggregates: [ { field: "BT", aggregate: "sum" }] }]
}
});
Update the scripts as below,
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://cdn.kendostatic.com/2017.3.913/js/kendo.all.min.js"></script>
We also faced the same issue. And its fixed once we updating with latest scripts.
Related
I'm using Kendo UI Complete v2013.2.918, trying to show a grid with aggregates by many columns related to one group column, the aggregates is only summing the latest row, I follow the examples on the kendo page and it looks the same but is not doing the sum. Any idea what is the issue?
this is my code:
detailGrid = $("#details_paginated_grid_table").kendoGrid({
columns: [
{ field: "CallDate", title: translate('DATE') },
{ field: "CallTime", title: translate('TIME') },
{ field: "From", title: translate('FROM') },
{ field: "Destination", title: translate('DESTINATION') },
{ field: "MaskedCalledNumber", title: translate('DIALNUMBER') },
{ field: "CallType", title: translate('CALLTYPE'), groupHeaderTemplate: "Name: #= value # total Call Type: #=count#" },
{ field: "CallDurationDisplay", title: translate('MINUTES'), footerTemplate: "Total: #=sum#", groupFooterTemplate: "Minutes: #=sum#", aggregates: ["sum"] },
{ field: "CallRateDisplay", title: translate('RATE'), footerTemplate: "Total: #=sum#", groupFooterTemplate: "Rate: #=sum#", aggregates: ["sum"] },
{ field: "LongDistanceChargeDisplay", title: translate('LD'), footerTemplate: "Total: #=sum#", groupFooterTemplate: "LD: #=sum#", aggregates: ["sum"] },
{ field: "PktDtVolDisplay", title: translate('DATA'), footerTemplate: "Total: #=sum#", groupFooterTemplate: "Data: #=sum#", aggregates: ["sum"] },
{ field: "TotalChargesDisplay", title: translate('TOTAL'), footerTemplate: "Total: #=sum#", groupFooterTemplate: "Charges: #=sum#", aggregates: ["sum"] }
],
dataSource: {
data: [],
group: {
field: "CallType",
aggregates: [
{ field: "CallDurationDisplay", aggregate: "sum" },
{ field: "CallRateDisplay", aggregate: "sum" },
{ field: "LongDistanceChargeDisplay", aggregate: "sum" },
{ field: "PktDtVolDisplay", aggregate: "sum" },
{ field: "TotalChargesDisplay", aggregate: "sum" },
{ field: "CallType", aggregate: "count" }
]
},
aggregate: [
{ field: "CallDurationDisplay", aggregate: "sum" },
{ field: "CallRateDisplay", aggregate: "sum" },
{ field: "LongDistanceChargeDisplay", aggregate: "sum" },
{ field: "PktDtVolDisplay", aggregate: "sum" },
{ field: "TotalChargesDisplay", aggregate: "sum" }
]
},
//sortable: false,
scrollable: false,
//pageable: false,
groupable: true,
height: 300,
});
Here an screenshot about the aggregates:
I am using kendo grid plugin to show data.
Have used the inbuilt functionality export to excel of kendo grid,to export grid data.
http://demos.telerik.com/kendo-ui/grid/excel-export
But I want to remove 2 columns before exporting the data to excel.
Please let me know how can I acheive it
Thanks,
Nupur
Please find the fiddle here, hope it will help to solve your issue.
You can read the documentation here.
<div id="grid" style="width: 900px"></div>
<script>
$("#grid").kendoGrid({
toolbar: ["Export"],
dataSource: {
type: "odata",
transport: {
read: "http://demos.telerik.com/kendo-ui/service/Northwind.svc/Products"
},
schema:{
model: {
fields: {
UnitsInStock: { type: "number" },
ProductName: { type: "string" },
UnitPrice: { type: "number" },
UnitsOnOrder: { type: "number" },
UnitsInStock: { type: "number" }
}
}
},
pageSize: 7,
group: {
field: "UnitsInStock", aggregates: [
{ field: "ProductName", aggregate: "count" },
{ field: "UnitPrice", aggregate: "sum"},
{ field: "UnitsOnOrder", aggregate: "average" },
{ field: "UnitsInStock", aggregate: "count" }
]
},
aggregate: [
{ field: "ProductName", aggregate: "count" },
{ field: "UnitPrice", aggregate: "sum" },
{ field: "UnitsOnOrder", aggregate: "average" },
{ field: "UnitsInStock", aggregate: "min" },
{ field: "UnitsInStock", aggregate: "max" }
]
},
sortable: true,
pageable: true,
groupable: true,
filterable: true,
columnMenu: true,
reorderable: true,
resizable: true,
columns: [
{ width: 300, locked: true, field: "ProductName", title: "Product Name", aggregates: ["count"], footerTemplate: "Total Count: #=count#", groupFooterTemplate: "Count: #=count#" },
{ width: 300, field: "UnitPrice", title: "Unit Price", aggregates: ["sum"] },
{ width: 300, field: "UnitsOnOrder", title: "Units On Order", aggregates: ["average"], footerTemplate: "Average: #=average#",
groupFooterTemplate: "Average: #=average#" },
{ width: 300, field: "UnitsInStock", title: "Units In Stock", aggregates: ["min", "max", "count"], footerTemplate: "Min: #= min # Max: #= max #",
groupHeaderTemplate: "Units In Stock: #= value # (Count: #= count#)" }
]
});
$(".k-grid-Export").on('click', function(e){
var grid = $("#grid").getKendoGrid();
var rows = [{
cells: [
{ value: "ProductName" },
{ value: "UnitPrice" }
]
}];
var trs = $("#grid").find('tr');
for (var i = 0; i < trs.length; i++) {
var dataItem = grid.dataItem(trs[i]);
rows.push({
cells: [
{ value: dataItem.ProductName },
{ value: dataItem.UnitPrice }
]
})
}
excelExport(rows);
e.preventDefault();
});
function excelExport(rows) {
var workbook = new kendo.ooxml.Workbook({
sheets: [
{
columns: [
{ autoWidth: true },
{ autoWidth: true }
],
title: "Orders",
rows: rows
}
]
});
kendo.saveAs({dataURI: workbook.toDataURL(), fileName: "Test.xlsx"});
}
</script>
[UPDATE]
To Export only filtered rows then use the following code. Refer the fiddle for working example
<div id="example">
<div id="grid" style="width: 900px"></div>
<script>
$("#grid").kendoGrid({
toolbar: ["Export"],
dataSource: {
type: "odata",
transport: {
read: "http://demos.telerik.com/kendo-ui/service/Northwind.svc/Products"
},
schema:{
model: {
fields: {
UnitsInStock: { type: "number" },
ProductName: { type: "string" },
UnitPrice: { type: "number" },
UnitsOnOrder: { type: "number" },
UnitsInStock: { type: "number" }
}
}
},
pageSize: 7,
group: {
field: "UnitsInStock", aggregates: [
{ field: "ProductName", aggregate: "count" },
{ field: "UnitPrice", aggregate: "sum"},
{ field: "UnitsOnOrder", aggregate: "average" },
{ field: "UnitsInStock", aggregate: "count" }
]
},
aggregate: [
{ field: "ProductName", aggregate: "count" },
{ field: "UnitPrice", aggregate: "sum" },
{ field: "UnitsOnOrder", aggregate: "average" },
{ field: "UnitsInStock", aggregate: "min" },
{ field: "UnitsInStock", aggregate: "max" }
]
},
sortable: true,
pageable: true,
groupable: true,
filterable: true,
columnMenu: true,
reorderable: true,
resizable: true,
columns: [
{ width: 300, locked: true, field: "ProductName", title: "Product Name", aggregates: ["count"], footerTemplate: "Total Count: #=count#", groupFooterTemplate: "Count: #=count#" },
{ width: 300, field: "UnitPrice", title: "Unit Price", aggregates: ["sum"] },
{ width: 300, field: "UnitsOnOrder", title: "Units On Order", aggregates: ["average"], footerTemplate: "Average: #=average#",
groupFooterTemplate: "Average: #=average#" },
{ width: 300, field: "UnitsInStock", title: "Units In Stock", aggregates: ["min", "max", "count"], footerTemplate: "Min: #= min # Max: #= max #",
groupHeaderTemplate: "Units In Stock: #= value # (Count: #= count#)" }
]
});
$(".k-grid-Export").on('click', function(e){
var grid = $("#grid").getKendoGrid();
var rows = [{
cells: [
{ value: "ProductName" },
{ value: "UnitPrice" }
]
}];
//var trs = $("#grid").find('tr');
var trs = grid.dataSource;
var filteredDataSource = new kendo.data.DataSource({
data: trs.data(),
filter: trs.filter()
});
filteredDataSource.read();
var data = filteredDataSource.view();
for (var i = 0; i < data.length; i++) {
var dataItem = data[i];
rows.push({
cells: [
{ value: dataItem.ProductName },
{ value: dataItem.UnitPrice }
]
})
}
excelExport(rows);
e.preventDefault();
});
function excelExport(rows) {
var workbook = new kendo.ooxml.Workbook({
sheets: [
{
columns: [
{ autoWidth: true },
{ autoWidth: true }
],
title: "Orders",
rows: rows
}
]
});
kendo.saveAs({dataURI: workbook.toDataURL(), fileName: "Test.xlsx"});
}
</script>
you can try the excelExport event of grid options.
excelExport: function(e) {
var sheet = e.workbook.sheets[0];
for (var i = 0; i < sheet.rows.length; i++) {
sheet.rows[i].cells.reverse();
for (var ci = 0; ci < sheet.rows[i].cells.length; ci++) {
sheet.rows[i].cells[ci].hAlign = "right";
}
}
},
http://docs.telerik.com/kendo-ui/controls/data-management/grid/excel-export#what-is-exported
I am one day old into Kendo, so I believe, I'm missing the obvious.
The grid seems to get stuck when tried to filter with Enum values set. Test Link
<div id="grid"></div>
<script>
$("#grid").kendoGrid({
columns: [
{
field: "category",
values: [{text: "Beverages", value: 1 }, {text: "Food", value: 2 }],
filterable: { mode: "row", cell: { showOperators: false, operator: "eq" } }
}
],
dataSource: [{ category: 1 }, { category: 2 } ],
filterable: {mode: "row"}
});
</script>
worked it out finally, missing type was all it seems needed. Demo Link
<div id="grid"></div>
<script>
$("#grid").kendoGrid({
columns: [
{
field: "category", type: "number",
values: [{text: "Beverages", value: 1 }, {text: "Food", value: 2 }],
filterable: { mode: "row", cell: { showOperators: false, operator: "eq" } }
}
],
dataSource: [{ category: 1 }, { category: 2 } ],
filterable: {mode: "row"}
});
</script>
is it possible to sum fields in a row of kendo grid? I'm able to summary columns in table but not a single rows. I've set aggregation for each field but it works only for "footerTemplate". I hope my question is clear... Thanks for any help!
Example:
User | Jan | Feb | Mar | Sum
John | 1000 | 2000 | 3000 | ???
Peter | 1500 | 2500 | 3500 | ???
footerTemplate SUM | 2500 | 4500 | 6500 | ???
In DataSource I define aggregation and group:
aggregate: [
{ field: "Jan", aggregate: "sum" },
{ field: "Feb", aggregate: "sum" }, ...
],
...
group: {field: "???", aggregates: [ { field: "Jan", aggregate: "sum" }, { field: "Feb", aggregate: "sum" } ]}
...
columns: [
...,
{ "field": "???", "title": "Summary", "format": "{0:n0}", "footerTemplate": "#= kendo.toString(sum, \"C\")#", "groupFooterTemplate": "#= kendo.toString(sum, \"C\")#" },
]
Thanks very much for any answer
The easiest way of getting it is defining an extra column (lets call it Sum) in the Grid that computes the value for you. This extra column uses a template for compute the value and this computation can be either invoking a function in your model (the cleanest) or directly hard code it.
Example:
// DataSource Definition
var ds = new kendo.data.DataSource({
data: [
{ Id:1, User: "John", Jan : 1000, Feb: 2000, Mar: 3000 },
{ Id:2, User: "Peter", Jan : 1500, Feb: 2500, Mar: 3500 }
],
pageSize: 10,
schema: {
model: {
id: "Id",
fields: {
Id: { type: 'number' },
User: { type: 'string' },
Jan: { type: 'number' },
Feb: { type: 'number' },
Mar: { type: 'number' }
},
Sum: function() {
return this.Jan + this.Feb + this.Mar;
}
}
}
});
Where I've defined a Sum function that computes the total for the fields Jan through Mar.
Then the Grid definition would be:
var grid = $("#grid").kendoGrid({
dataSource: ds,
pageable: true,
columns: [
{ field: "User" },
{ field: "Jan" },
{ field: "Feb" },
{ field: "Mar" },
{ title: "Sum", template: "#= Sum() #" }
]
}).data("kendoGrid");
NOTE: I'm not including the aggregates since you do not have problems with this.
As you can see the Sum column computes the sum when invoked from the template. See it here : http://jsfiddle.net/OnaBai/Bz3Y5/
The second approach would be not having Sum function but computing the value in the template.
var grid = $("#grid").kendoGrid({
dataSource: ds,
pageable: true,
columns: [
{ field: "User" },
{ field: "Jan" },
{ field: "Feb" },
{ field: "Mar" },
{ title: "Sum", template: "#= data.Jan + data.Feb + data.Mar #" }
]
}).data("kendoGrid");
See it implemented here: http://jsfiddle.net/OnaBai/Bz3Y5/2/
The disadvantage with this two approaches is that you have to compute the total each time the template is invoked so if you paginate you might have some extra processing. If you want to avoid this, then you can use parse function in the DataSource:
var ds = new kendo.data.DataSource({
data: [
{ Id:1, User: "John", Jan : 1000, Feb: 2000, Mar: 3000 },
{ Id:2, User: "Peter", Jan : 1500, Feb: 2500, Mar: 3500 }
],
pageSize: 10,
schema: {
model: {
id: "Id",
fields: {
Id: { type: 'number' },
User: { type: 'string' },
Jan: { type: 'number' },
Feb: { type: 'number' },
Mar: { type: 'number' }
}
},
parse: function (d) {
$.each(d, function (idx, elem) {
elem.Sum = elem.Jan + elem.Feb + elem.Mar;
});
return d;
}
}
});
This parse function receives the original data and transforms it in whatever you want, adding, removing, transforming any field in the original data and before sending it to the Grid.
You can see this last approach here : http://jsfiddle.net/OnaBai/Bz3Y5/3/
I have searched a lot but I haven't found solution.
Is there any way to add a row(as a last row) with totals for each column in kendu grid?
You need to set the footerTemplate of the grid columns. Then use aggregates. Here is a running code snippet:
<div id="grid"></div>
<script>
$("#grid").kendoGrid({
columns: [
{ field: "name" },
{ field: "age",
footerTemplate: "Min: #: min # Max: #: max #"
}
],
dataSource: {
data: [
{ name: "Jane Doe", age: 30 },
{ name: "John Doe", age: 33 }
],
aggregate: [
{ field: "age", aggregate: "min" },
{ field: "age", aggregate: "max" }
]
}
});
</script>