I'm struggling with getting a footer, to display totals, on a Kendo Angular Grid which is bound async. to a backend API.
The example on the Kendo website refers to a fixed array and doesn't include any examples (although everything else does !?) of have to achieve this when bound to ASYNC data.
You need to grab your Database results into an object (data) independent from you grid data
Here you have documentation about aggregateBy https://www.telerik.com/kendo-angular-ui/components/dataquery/api/aggregateBy/
const result = aggregateBy(data, [
{ aggregate: "sum", field: "unitPrice" },
{ aggregate: "sum", field: "unitsInStock" }
]);
To get your result use
const result = <AggregateResult>{
"unitPrice": { "sum": 53, "count": 2 },
"unitsInStock": { "sum": 66, "count": 3 }
};
Related
How can I change the title of a loaded chart using javascript? The following doesn't work with external data
https://codepen.io/abdfahim/pen/zYOPvPx
var chart = am4core.createFromConfig({
"titles": [
{
"text": "ABCD",
"fontSize": 25,
"marginBottom": 10
}
],
"dataSource": {
"url": "https://s3-us-west-2.amazonaws.com/s.cdpn.io/t-160/sample_data_serial.json"
},
"xAxes": [
{
"type": "CategoryAxis",
"dataFields": {
"category": "year"
}
}
],
"yAxes": [
{
"type": "ValueAxis"
}
],
"series": [
{
"type": "ColumnSeries",
"name": "Cars",
"dataFields": {
"categoryX": "year",
"valueY": "cars"
}
}
]
}, "chartdiv", am4charts.XYChart);
function changeTitle()
{
chart.titles[0].text = "New Title";
}
AmCharts v4 uses lists for the majority of its array-like objects, so using subscripts will not work. It's recommended to use the accessor methods provided by the list to get at the object you want to change, such as getIndex:
chart.titles.getIndex(0).title = "New title"
Updated codepen
Just in case some one will hit my same issue, I found this solution working for me
chart.titles.getIndex(0).text = "new title";
this is particularly handy if you are going to refresh the chart each x seconds
I'm getting the data for the grid using an API. The api is returning the data in the below format
{
"current": 1,
"rowCount": 10,
"rows": [
{
"id": 19,
"sender": "123#test.de",
"received": "2014-05-30T22:15:00"
},
{
"id": 14,
"sender": "123#test.de",
"received": "2014-05-30T20:15:00"
},
...
],
"total": 1123
}
My question is, is it possible the to send back the "total" to the API when the user clicks on next page or search or any other operation?. Basically I want to send the total after the first time data loaded to the grid.
ajax: true,
post: function ()
{
/* To accumulate custom parameter with the request object */
return {
ReportID: "[ReportID]"
,Parameters:"[ReportParameters:Json]"
,RecordsPerPage:ReportOption.pageSize
,Key:drillThroughKey
**,Total:{total}**
};
}
In the above code {total} needs to be the total received at the first time.
Thanks
I'm trying to filter some data for a chart with date-sensitive information
if I select a date range, with no date, that would return an empty array of results, the application doesn't crash, but as soon as there is data withing the range of the FilterDate and gte (hence, there are points made after the filterDate), then the application crashes on that line.
axisChange : function(){
//set date from period
var filterDate = new Date();
switch(this.get('selectedPeriod'))
{
case 'week':
filterDate.setMonth(filterDate.getMonth()-1);
break;
case 'day':
filterDate.setDate(filterDate.getDate()-7);
break;
case 'hour':
filterDate.setDate(filterDate.getDate()-1);
break;
}
/*var chart = jQuery("#chart").data("kendoChart");
chart.setOptions({ categoryAxis: { baseUnit: this.get('selectedCategory') }});*/
dataSource.filter({
"field": "CreatedAt",
"operator": "gt",
"value": filterDate
});
}
EDIT
ON closer inspection this is an issue with dataSource.filter, specific to the date, if I try to use another filter like:
dataSource.filter({
"field": "Note",
"operator": "contains",
"value": 'e'
});
everything is updated okay according to the filter.
FOR DETAILED CODE, PLEASE VISIT GITHUB REPO
https://github.com/Danelund/NeuroHelper/blob/master/NeuroHelper/scripts/app.js
My first thought about this problem is about date format. Place a breakpoint before dataSource.filter line and check what is the date format. Probably you should also convert this date object to string using some kind of date.toString() function.
dataSource.filter({
"field": "CreatedAt",
"operator": "gt",
"value": filterDate.toString()
});
Have you specified the type of the field that you want to filter (i.e. CreatedAt) to be of type "date" ?
How to do so is demonstrated here.
schema: {
model: {
id: "ProductID",
fields: {
CreatedAt: {
type: "date"
},
I have a jsonarray something like this:
var jsonarr= [{"displayName":"Rachita Jain","phoneNumbers":[{"value":"(787) 989-6756"},{"value":"
(897) 867-4666"}]},{"displayName":"Akanksha Mittal","phoneNumbers":[{"value":"(678) 456-4677"}]}]
I want to sort this using knockout based on displayName.
Use sort function array:
var jsonarr = [{
"displayName": "Rachita Jain",
"phoneNumbers": [{
"value": "(787) 989-6756"
}, {
"value": "(897) 867-4666"
}]
}, {
"displayName": "Akanksha Mittal",
"phoneNumbers": [{
"value": "(678) 456-4677"
}]
}];
jsonarr.sort(function (item1, item2) { return (item1.displayName > item2.displayName) ? 1 : -1 });
console.log(jsonarr);
See fiddle
Is there a way to filter the data currently displayed in a jqGrid programmatically (in Javascript, not server-side)? All the search examples seem to depend on using jqGrid's own search UI, which doesn't work for me. For example, I'd like to be able to filter based on user actions elsewhere on a page.
I'm imagining something like
jQuery("#grid_id").filter('CategoryID', selectedCategoryID);
where CategoryID is a column in the grid and selectedCategoryID contains, for example, a value chosen by the user in a select element.
If you want to pre-filter your data first:
$('#myGrid').setGridParam({ data: filtereddataarray }).trigger("reloadGrid");
where filtereddataarray contains only records you want to display for this view
If you want to construct your filter programmatically(I use this method, mostly):
var filters = { "groupOp": "AND", "rules": [{ "field": "id", "op": "eq", "data": "9" }, { "field": "amount", "op": "ge", "data": "10" }, { "field": "name", "op": "cn", "data": "do i"}] };
//To filter:
jqGridFilter(filters , $('#myGrid'));
//To reset:
jqGridFilter(null, $('#myGrid'));
function jqGridFilter(filtersparam, grid) {
grid.setGridParam({
postData: {
filters: filtersparam
},
search: true
});
grid.trigger("reloadGrid");
}
You could pass JSON as the data and use the setGridParam method to reload the data!
I have never tried this and not sure how you would get jqgrid to use your client data rather than hit a URL!
Have you had any luck?