Let's say my datasource shows price and quantity of different products grouped by product type.
Is it possible to show two columns per attribute (two for price and two for quantity), where one is showing the average and the other one is showing the stdevs?
You can add a second aggregation for each value field as a calculated value:
measures: [{
uniqueName: "Price",
aggregation: "stdevs",
caption: "STDEV of Price"
},
{
uniqueName: "PriceAverage",
formula: "average('Price')",
caption: "Average of Price"
}]
Here is a full example in the snippet:
var pivot = new WebDataRocks({
container: "#wdr-component",
toolbar: true,
report: {
dataSource: {
dataSourceType: "csv",
filename: "https://cdn.webdatarocks.com/data/data.csv"
},
options: {
showAggregationLabels: false
},
slice: {
rows: [{
"uniqueName": "Category"
}],
columns: [{
"uniqueName": "Measures"
}],
measures: [{
uniqueName: "Price",
aggregation: "stdevs",
caption: "STDEV of Price"
},
{
uniqueName: "PriceAverage",
formula: "average('Price')",
caption: "Average of Price"
},
{
uniqueName: "Quantity",
aggregation: "stdevs",
caption: "STDEV of Quantity"
},
{ uniqueName: "QuantityAverage",
formula: "average('Quantity')",
caption: "Average of Quantity"
},
]
},
formats: [{
name: "", //default format
decimalPlaces: 2,
currencySymbol: "$",
currencySymbolAlign: "left"
}]
}
});
<link href="https://cdn.webdatarocks.com/latest/webdatarocks.min.css" rel="stylesheet"/>
<script src="https://cdn.webdatarocks.com/latest/webdatarocks.toolbar.min.js"></script>
<script src="https://cdn.webdatarocks.com/latest/webdatarocks.js"></script>
<div id="wdr-component"></div>
Related
****example: http://jsfiddle.net/o8cw3vj8/12/
I am trying to export kendo ui grid and grid has date column, when exported it contains only ############... when date year is less than or equal to 1900
Thanks,****
$("#grid1").kendoGrid({
toolbar: ["excel"],
excel: {
fileName: "Kendo UI Grid Export.xlsx",
proxyURL: "http://demos.telerik.com/kendo-ui/service/export",
filterable: true
},
dataSource: {
data: [{
"Id": 1,
"Name": "John",
"DOB": "01/01/1753"
}, {
"Id": 2,
"Name": "Joe",
"DOB": "01/01/1953"
}, {
"Id": 3,
"Name": "Jack",
"DOB": "01/01/1940"
}],
schema: {
model: {
fields: {
Id: {
type: "number"
},
Name: {
type: "string"
},
DOB: {
type: "date"
}
}
}
}
},
columns: [
"Id", "Name", "DOB"
]
});
If you hover the cell you will see a message "Dates and times that are negative or too large display as #####". Here is a screenshot:
This happens because Excel saves dates as numbers of days after 1/1/1990. In your case the numbers become negative hence the display.
I have a requirement in which I have to show two dropdown list in the Filterable cell of kendo grid. These two dropdown lists would filter two different columns in the kendo grid.
One thought I had is having template which would be some kendo container like some panel probably, and then add two dropdowns to that container.
Is this even possible? If yes how to achieve this?
Here is my kendo grid definition.
ctrl.mainGridOptions = {
dataSource: ctrl.gridDataSource,
columns: [
{
title: 'Col1-Col2',
field: 'Col1',
width: 200,
template: kendo.template($("#col1").html()),
filterable: { cell: { template: ctrl.coonetemplate, showOperators: false } }
},
{
field: 'Col3',
width: 150,
title: 'Col3',
template: kendo.template($("#col3").html()),
filterable: { cell: { template: ctrl.colthreeTemplate, showOperators: false } }
}
]
}
Here is a mockup of what I want to achieve.
There are a few different parts to this.
First, if you want to have multiple filter controls for different pieces of data, you should define a column for each one. Then, put a template on the first column to have it display the data for two columns. Use the attributes option to set a colspan=2. Then, use the attributes option on the second columns to set style="display:none".
The second part is getting the dropdowns. I generally prefer to use the values option to accomplish this. The code below uses this for the OrderID column. The other alternative was the approach you were on, which is to use the cell template. The code below uses this on the ShipName column.
<div id="example">
<div id="grid"></div>
<script>
$(document).ready(function() {
$("#grid").kendoGrid({
dataSource: {
type: "odata",
transport: {
read: "http://demos.telerik.com/kendo-ui/service/Northwind.svc/Orders"
},
schema: {
model: {
fields: {
OrderID: { type: "string" },
Freight: { type: "number" },
ShipName: { type: "string" },
OrderDate: { type: "date" },
ShipCity: { type: "string" }
}
}
},
pageSize: 20,
serverPaging: true,
serverFiltering: true,
},
height: 550,
filterable: {
mode: "row"
},
pageable: true,
columns: [
{
field: "OrderID",
width: 150,
attributes: {
colspan: 2
},
values: [
{text: "10248", value: "one"},
{text:"10249", value: "two"}
],
template: '#:OrderID# (#:ShipName#)',
filterable: {
cell: {
operator: "eq",
showOperators: false
}
}
},
{
attributes: {
style: "display:none"
},
field: "ShipName",
width: 200,
title: "Ship Name",
filterable: {
cell: {
template: function(args) {
args.element.kendoDropDownList({
dataSource: args.dataSource,
dataTextField: "ShipName",
dataValueField: "ShipName",
valuePrimitive: true
});
},
operator: "eq",
showOperators: false
}
}
},
{
field: "Freight",
width: 255,
filterable: false
}]
});
});
</script>
</div>
Runnable Demo
Kendo Grid filterable cell with custom options column wise and by using this solution it also overwrites general filters settings in case specific column requirement. ASP.NET MVC C#.
columns.Bound(c => c.columnName)
.Format("{0}%")
.Filterable(ftb => ftb
.Cell(cell => cell.ShowOperators(true))
.Extra(false)
.Operators(op => op
.ForNumber(fn => fn
.Clear()
.IsEqualTo(CommonResource.GridFilter_IsEqualTo)
)
)
)
.Title("Column Name");
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>
I have the codes below for example:
$("#grid").kendoGrid({
dataSource: {
data: students,
pageable: false
},
scrollable: true
sortable: true,
selectable: true,
columns: [
{ field: "Name", title: "Name", width: 230},
{ field: "Sex", title: "Sex", width: 50 },
{ field: "Ca", title: "C.A." , width: 55 },
{ field: "TotolScore", title: "Totol Score", width: 100 },
{ field: "Rank", title: "Rank", width: 60 }
]
});
The codes above allows me to do sorting of columns. But I need to do extra special for the "Rank" column. What I want is when I click the column "Rank" it will sort but based on "TotalScore" value.
Is that possible?
Thanks
Yes, it is possible.
When a column is sortable, you can define a compare function and this does not have to compare the same column.
Example: Replace your Rank column definition by this...
{
field: "Rank",
title: "Rank",
width: 60,
sortable : {
compare : function (a, b) {
return a.TotolScore - b.TotolScore;
}
}
}
Here, I define a column that will show the value of Rank but I define my own compare function that is actually working on TotalScore values.
You can check compare documentation for more information.
And check a running example here: http://jsfiddle.net/OnaBai/p2tsupvx/
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>