I have a KendoUI Grid where I need to display a sum of several of the columns in the footer.
As the Items column is bound this seems to be working perfectly.
I also have a Total Net £s for Items column which is calculated but I cannot get the aggregate function to work. Is it possible to sum a calculated column?
columns.Bound(m => m.Items).Format("{0:n2}")
.HtmlAttributes(new { #class = "items" }).Title("Units")
.ClientFooterTemplate("#= kendo.format('{0:n2}', sum) #");
columns.Template(p => { })
.ClientTemplate("#= kendo.toString((Items * 12) * NetPoundsPerItem, 'n2') #")
.Title("Total Net £s for Items")
.FooterTemplate("#= kendo.tostring(sum, \"n2\") #");
because this is a unbound column you will need to keep track of your numbers manually and then put your sum in your aggregate column. Use a footer template
columns: [
{ field: "Cost", width: 120 }, footertemplate: "<div id='total'> Total : $0.00 </div> },
{ field: "Quanity", title: "Quanity", width: 40}]
Use javascript to calculate the sum and then use jquery to set it.
//get the correct grid Kendo Grid
var grid = $("#grid").data("kendoGrid");
//get the data
var data = grid.dataSource.view();
var FinalTotal = 0;
// now iterate through each cell
data.forEach(function (entry) {
FinalTotal += entry["Quanitiy"] * entry["Price"];
}
// set the aggregate template div
$('#total').text("Total: " + kendo.toString(FinalTotal, 'C'));
Related
If I have a kendo combobox that contains more than 1 value I would like to insert "-ALL- as the DataTextField and "9999" as the DataValueField. Currently, if I have only a single record I use the DataBound event to test for that and if it = 1 then I load a grid based on this value, but if the length > 1 then I would like to add the -All-. I don't understand the insert as described by telerik.
#(Html.Kendo().ComboBox()
.Name("FAList")
.Placeholder("Select Fiscal Agency...")
.DataTextField("Text")
.DataValueField("Value")
.HtmlAttributes(new { style = "width:50%;" })
.Filter("startswith")
.AutoBind(true)
.MinLength(3)
.DataSource(source =>
{
source.Read(read =>
{
read.Action("GetUserAgencyList", "Entities");
})
.ServerFiltering(true);
})
.Events(e => e
.Change("onFAChange")
.DataBound("onFADataBound")
)
)
and then the function for binding the data
function onFADataBound(e) {
// the agency list dropdown
var combobox = $("#FAList").data("kendoComboBox");
// if there is only a single record then set that in the combobox and load the grid based on that
if (e.sender.dataSource.view().length == 1) {
e.sender.select(0);
var filter = this.value();
$.get('/City/CityGrid_Read', { id: filter }, function (data) {
var grid = $("#FollowUpGrid").data("kendoGrid");
grid.dataSource.read();
})
}
if (e.sender.dataSource.view().length > 1) {
}
}
Answered at: Adding an item dynamically in kendo combobox
Combining that with your code:
if (e.sender.dataSource.view().length > 1) {
$("#FAList").data("kendoComboBox").dataSource.add({ Text: "-All-",
Value: "0" });
}
Something like that! I hope you get this implemented :)
An alternative could be to change the Placeholder text in this event method where length > 1
as per example on: http://www.telerik.com/forums/placeholder-text
$("#FAList").data("kendoComboBox").input.attr("placeholder", "-All-");
Does anyone know if there is a way to create a custom group header template that will allow columns to be shown with aggregate data by column in that group?
The grid component uses colspan and I want to control the entire rending of the group header template.
Example of modified HTML showing desired UI
With the current implementation of Kendo UI Grid only the aggregates from the grouped column can be displayed in the groupHeaderTemplate.
You can also check this post: http://www.telerik.com/forums/multiple-aggregates-in-groupheadertemplate
There isn't a recomended workaround.
What you can try is to calculate each sum you want.
{ field: "groupField", title: "groupField", groupHeaderTemplate: "#= getGroupInfo(data, count) #", hidden: true },
..
dataSource: {
data: gridData,
schema: { model: gridModel },
pageSize: 20,
group: { field: "groupField", aggregates: [{ field: "groupFieldId", aggregate: "count" }] }
},
And the getGroupInfoFunction:
function getGroupInfo(data, count) {
return '<div style="float: right;width: 95%;"><div style="float:left;"><span>Number of units in stock: ' + count + " Sum1: " + getSum1(data.value) + '</span></div> Sum2:' + getSum2(data.value) + '</div>';
};
GetSum1():
function getBatchStatus(id) {
var sum;
var data = $("#priceChangeTasks").data("kendoGrid").dataSource.data();
for (var i = 0; i < data.length; i++) {
if (data[i].groupFieldId== id) {
sum += data[i].yoursumfield1;
}
}
return sum;
};
I'm attempting to use the Grid component's built-in support for exporting to excel, applying custom cell formatting as shown in these Telerik docs:
http://docs.telerik.com/kendo-ui/controls/data-management/grid/how-to/excel/cell-format
The approach using hard-coded row / cell indexes in the export comes with a rather obvious issue when exporting a grid with a prior hidden column displayed - best way to reproduce is to refer to this jsfiddle:
https://jsfiddle.net/3anqpnqt/1/
Run fiddle
Click export to excel - observe custom number formatting
Unhide subcategory column (using column menu)
Click export to excel - observe custom number formatting on column 2 which is now 'subcategory'
With reference to this code in the fiddle:
$("#grid").kendoGrid({
toolbar: ["excel"],
excel: {
fileName: "Grid.xlsx",
filterable: true
},
columns: [
{ field: "productName" },
{ field: "category" },
{ field: "subcategory", hidden: true },
{ field: "unitPrice"}
],
dataSource: [
{ productName: "Tea", category: "Beverages", subcategory: "Bev1", unitPrice: 1.5 },
{ productName: "Coffee", category: "Beverages", subcategory: "Bev2", unitPrice: 5.332 },
{ productName: "Ham", category: "Food", subcategory: "Food1", unitPrice: -2.3455 },
{ productName: "Bread", category: "Food", subcategory: "Food2", unitPrice: 6 }
],
columnMenu: true,
excelExport: function(e) {
var sheet = e.workbook.sheets[0];
for (var rowIndex = 0; rowIndex < sheet.rows.length; rowIndex++) {
var row = sheet.rows[rowIndex];
var numericFormat = "#,##0.00;[Red](#,##0.00);-";
for (var cellIndex = 0; cellIndex < row.cells.length; cellIndex++) {
var cell = row.cells[cellIndex];
if (row.type === "data") {
if (cellIndex == 2) { // how are we able to identify the column without using indexes?
cell.format = numericFormat;
cell.hAlign = "right";
}
}
}
}
}
});
What I need to be able to do is identify the cell as the 'unitPrice' and apply the format, but inspection of the object model within the excelExport handler doesn't give me any way to make this link. In my real application, I have several custom formats to apply (percentages, n0, n2 etc) so it's not as simple as going $.isNumeric(cell.value) or otherwise.
Update
I also need the solution to work with column / row groups, which generate additional header rows / columns in the Excel model.
It looks like row[0] is the header row, so you could try changing
if (cellIndex == 2) {
to
if (sheet.rows[0].cells[cellIndex].value == "unitPrice") {
EDIT:
Seems to work with column group: https://jsfiddle.net/dwosrs0x/
Update:
The object model for worksheet is not the most clear. The first row does seem to be a "master" header row in the various scenarios that I looked at. Here is something that seems to work if unitPrice is not in a grouping. If unitPrice is in a grouping, then something more complicated involving the group header (row[1]) might be possible. The puzzle is to find out what position the desired column will eventually occupy.
var header = sheet.rows[0];
var upIndex = -1;
var upFound = false;
for (var cellIndex = 0; cellIndex < header.cells.length; cellIndex++) {
if ('colSpan' in header.cells[cellIndex])
upIndex = upIndex + header.cells[cellIndex].colSpan;
else
upIndex = upIndex + 1;
if (header.cells[cellIndex].value == "unitPrice") { // wot we want
upFound = true;
break;
}
}
for (var rowIndex = 0; rowIndex < sheet.rows.length; rowIndex++) {
var row = sheet.rows[rowIndex];
if (row.type === "data" && upFound) {
var cell = row.cells[upIndex];
cell.format = numericFormat;
cell.hAlign = "right";
}
}
fiddle with groups - https://jsfiddle.net/dwosrs0x/4/
fiddle with straightforward grid (to prove it still works) - https://jsfiddle.net/gde4nr0y/1/
This definitely has the whiff of "bodge" about it.
How to hide/show and Enable/Disable columns in kendo grid on condition or event.
I could only find option of enable/disable kendogrid column in .model
Any help is appreciated.
Thank you in advance!
You showing/hiding columns in KendoUI Grid you should use showColumn and hideColumnand use as argument a number (the index of the column that you want to show/hide) or a string (the name of the field associated in that column).
Example:
var grid = $("#grid").kendoGrid({
dataSource: ds,
editable : false,
pageable : true,
columns :
[
{ field: "FirstName", width: 90, title: "First Name" },
{ field: "LastName", width: 90, title: "Last Name" },
{ field: "City", width: 100 }
]
}).data("kendoGrid");
$("#show_col1").on("click", function() {
// Use the index of the column to show
grid.showColumn(0);
});
$("#hide_col1").on("click", function() {
// Use the name of the field to hide it
grid.hideColumn("FirstName");
});
You can control if the column should be initially hidden by setting hidden in the column initialization.
See an example here : http://jsfiddle.net/OnaBai/XNcmt
The Kendo grid contains a showColumn method that will take either an index or the column name string. To enable hiding/displaying columns, you'll initialize the grid columnX as a normal column, and mark it hidden (in MVC this is the .Hidden() method when binding the column). Then based on a page event, you can simply call showColumn (and then hideColumn to reverse the operation).
For Kendo Grid that has already been created, you can show/hide make all columns editable/uneditable by:
var allowEdit = false;
var grid = $("#sampleGrid").data("kendoGrid");
grid.showColumn(0);
grid.showColumn(1);
if (!allowEdit) {
grid.hideColumn(0);
grid.hideColumn(1);
}
var len = $("#sampleGrid").find("tbody tr").length;
for (var i = 0; i <= len ; i++) {
var model = $("#sampleGrid").data("kendoGrid").dataSource.at(i);
if (model) {
for (i = 0; i <= (grid.columns.length - 1) ; i++) {
var column = grid.columns[i];
model.fields[column.field].editable = allowEdit;
}
}
}
I'm firing the databound event but I'm not sure what do do from there.
The links here lead to generic docs:
http://www.kendoui.com/forums/ui/grid/highlight-sorted-column.aspx
Does anyone have a simple example of highlighting the current sorted column?
The idea is as follows:
Handle the dataBound event of the grid.
Get the current sort expression of the data source using its sort method.
Find the grid column which is bound to the sorted field. Iterate over the grid columns field.
Highlight the table cells which correspond to the column index. Use the tbody field of the grid.
Here is a sample implementation:
<div id="grid"></div>
<script>
$("#grid").kendoGrid({
dataSource: [
{ name: "Jane Doe", age: 30 },
{ name: "Jane Doe", age: 33 }
],
sortable: true,
dataBound: function() {
var columns = this.columns;
var sort = this.dataSource.sort()[0];
var sortedIndex = -1;
if (sort) {
for (var i = 0; i < columns.length; i++) {
if (columns[i].field == sort.field) {
sortedIndex = i;
break;
}
}
}
if (sortedIndex >= 0) {
this.tbody
.find("tr")
.find("td:eq(" + sortedIndex + ")")
.css( { background: "#a0b0c0" } );
}
}
});
</script>
And a live demo: http://jsbin.com/ixahid/1/edit