I hope this question hasn't been asked elsewhere but I'm running into an issue with a kendoGrid and adding aggregates. This is an existing grid bound to a data Source that is an array.
What is the best way to add an aggregate to an existing data Source?
Here is what I'm doing to bind to the existing data Source:
var grid = $("#myGrid").data("kendoGrid");
grid.dataSource.data(myArray);
Once you set the data you can add new aggregate like shown in the documentation.
var dataSource= new kendo.data.DataSource({
data: [
{ name: "Jane Doe", age: 30 },
{ name: "John Doe", age: 33 }
]
});
// calculate the minimum and maximum age
dataSource.aggregate([
{ field: "age", aggregate: "min" },
{ field: "age", aggregate: "max" }
]);
var ageAggregates = dataSource.aggregates().age;
console.log(ageAggregates.min); // displays "30"
console.log(ageAggregates.max); // displays "33"
Related
I am trying to display data from table in sorted way. I want to display content ordered by creation date. I add sortInfo, but it does not work! I use angular ui-grid. Here is my code
$scope.gridOptions = {
enableSorting: true,
columnDefs: [
{ field: 'name'},
{ field: 'age'},
{ field: 'creationDate', cellFilter : "date:'yyyy-MM-dd'"}
],
sortInfo: {
fields: ['creationDate'],
directions:['desc']
}
};
Is it possible to set sort by default here? And how to do it?
I didn't found in ui-grid docs sortInfo option.
Your gridOptions is not set right. You need to add the sort property to your column definition like below, the priority is what makes it sort by default. Lower priority gets sorted first. Read more here http://ui-grid.info/docs/#/tutorial/102_sorting
$scope.gridOptions = {
enableSorting: true,
columnDefs: [
{
field: 'name',
sort: {
direction: uiGridConstants.DESC,
priority: 1
}
}
}
I have a data source, which gets built from a JSON data string, containing a field called Fruit:
[{
... /other entries
fruit: [{
name: 1
}, {
name: 2
}, {
name: 3
}]
}]
I'm using this field in a KGrid, and would like to do a comma seperated list of links, from the names:
1, 2, 3
Currently, I'm hooking into the dataBound function, and build this up individually for the fruit field, is there an easier way to do this with, let's say, a template? I tried to look up information about something similar in the docs, but couldn't find anything pertaining to splitting arrays?
I wouldn't transform the data at the data source. That job is the responsibility of the UI component. Instead move your logic to the column template function of your grid. [ API reference ]
$('#grid').kendoGrid({
columns: [ {
field: 'fruit',
template: function(dataItem) {
var html = [];
for (var i = 0; i < dataItem.length; i++) {
html.push('' + dataItem[i].name + '');
}
return html.join(', ');
}
}],
dataSource: data
});
When loading a dgrid from a dojo store, is there a way to specify a column to be sorted by default.
Say I have 2 columns, Name and Email, I want the name column sorted by default when the grid is first loaded. What I want is the equivalent of the user clicking on the 'Name' header (complete with the sort arrow indicating the sort direction).
Thanks,
John
You can do something like this :
var mygrid = new OnDemandGrid({
store : someStore,
queryOptions: {
sort: [{ attribute: "name" }]
}
// rest of your grid properties
}, "someNode");
dgrid 1.1.0 - set initial/default sort order
var TrackableRest = declare([Rest, SimpleQuery, Trackable]);
var store = new TrackableRest({target: apiUrl, useRangeHeaders: true, idProperty: 'id'});
var grid = new (declare([OnDemandGrid, Selection, Editor]))({
collection: store,
sort: [{"property":"name", "descending": false}],
className: "dgrid-autoheight",
columns: {
id: {
label: core.id
},
category_text: {
label: asset.category
},
name: {
label: asset.model,
},
Modifying an element using set of a KendoUI grid removes the selection.
If a have a KendoUI DataSource defined as:
var dataSource = new kendo.data.DataSource({
data : [
{ "id": 1, "item": "item1", "value": "foo" },
{ "id": 2, "item": "item2", "value": "foo" },
{ "id": 3, "item": "item3", "value": "foo" },
{ "id": 4, "item": "item4", "value": "foo" }
],
pageSize: 5
});
and the grid as:
var grid = $("#grid").kendoGrid({
dataSource: dataSource,
columns : [
{ field: "item", title: "Item" },
{ field: "value", title: "Value" }
],
selectable: "row"
}).data("kendoGrid");
If I click in a row (select it) and then update the model using the following code:
dataSource.data()[0].set("value", "bar");
The selection gets lost.
Sample code in JSFiddle here
Instructions:
Select any row.
Click the button for changing the value of the first row.
Is there any way of preserving selection when updating a local DataSource?
This is expected behavior when a change event of the dataSource occurs the Grid reacts and it is redrawn. You can silently update the field like this:
dataSource.data()[0].value = "bar";
However this will not trigger the change event and the Grid wont be updated either.
To preserve the selection of the Grid between 'refreshes' you can use the approach covered in this code library article. You can store them in a cookie or in the memory, it is up to you.
Regards
I was able to find solution for a very similar problem. I tried to select next row after modifying selected row, but updating data item cleared selection.
The trick was to save data-uid of the element to be selected. After update, I simply select element by uid.
var selected = grid.select();
var next = selected.next();
var nextUid = next.data("uid");
var dataItem = grid.dataItem(selected);
if (dataItem) {
dataItem.set("value", dataItem.get("value") - 1);
if (next.length)
grid.select($("#grid").find("*[data-uid='" + nextUid + "']"));
}
You can try it here.
Using the Kendo UI Grid and MVC 4, I haven't been able to find a way to put summary totals (financial) at the bottom of the grid for select columns.
Is this possible?
Yes indeed! check DataSource Aggregate.
Example:
var stocksDataSource = new kendo.data.DataSource({
transport:{
read:function (options) {
}
},
schema :{
model:{
fields:{
name :{ type:"string" },
price:{ type:"number" }
}
}
},
aggregate:[
{ field:"price", aggregate:"sum" }
],
pageSize :10
});
I have defined a DataSource with two fields: the items name and price. I want to totalize the price so I defined an aggregate for price and what I'm going to do is sum (you can also min, max, average and count).
Then in the Grid when I define the columns I write:
columns :[
{ field:"name", title:"Product" },
{ field:"price", title:"Price", footerTemplate:"Sum: #= sum # " }
],
And that's it!