I have a grid within a form as in the attached image. When the the customer name is changed, then the grid store is loaded with records corresponding to the customer. I want the balance textfield to be populated with the sum of Amount due column.
The image is here.
Use like this:
store.load({
scope : this,
callback: function(records, operation, success) {
//here the store has been loaded so you can use what functions you like.
//This code sum numbers in certain column
sum = 0;
store.each(function (rec) { sum += rec.get('NameColumn'); });
}
});
Use the store summary function:
var sum = grid.getStore().sum('NameColumn');
sencha api: sum store
Related
Firebase dp data sum
I have a web application and I would like to make a function to add all the integers in the "equipment" field of all the documents in the "epis" collection.
My application is in reactjs.
What's the best way?
enter image description here
I believe this is a pure JS problem. My solution would be to use the JS reduce function on the array of objects after fetching from firestore. i.e.
function getSum(total, num) {
return (total + parseInt(num.equipment));
}
useEffect(() => {
var firestoreArray = [...]; //this is populated with the array of objects
// from firestore when you fetch. format is {name: "shovel", equipment: "12" }
var total = firestoreArray.reduce(getSum, 0); //reduce function where the 0 is the starting
//point of the sum. the getSum function is adding by parsing to Integer first for all the
//objects "equipment" attribute.
}, [firestoreArray]}
I'm trying to recreate the following pivot table with ag-Grid:
Using floatingBottomRowData I can't find a way to pass the values for all generated columns. so one pair of values is getting duplicated:
My goal is to access the column group value for each cell of the floating row.
Right now I can't tell the difference between column groups (resulting in duplicated values).
Is there any way to differentiate the different (col1, col2) pairs?
The answer that was given in the ag-grid forum is:
to get the pivot key, do this:
floatingCellRenderer: function(params) {
if (gridOptions.columnApi.isPivotMode()) {
console.log(params.column.getId());
var parent = params.column.getParent();
if (parent) {
var pivotKey = console.log(parent.getOriginalColumnGroup().getColGroupDef().pivotKeys[0]);
}
}
}
to get the columns in the active pivot, use the column API, eg columnApi.getPivotColumns(), which will return a list of the pivot columns. this will be in order, so if you have many columns, there will be one for each parent you traverse.
What I did for the pivot_ type of pinned row: I added a custom pinned row renderer to my column, where I expect the aggregated function to show (for me it was for sum and avg). If I change the pivot function I called a refresh on the pinned row to set the new values.
pinnedRowCellRenderer: function (render)
{
for (var obj_id in render.data)
{
if (obj_id == render.column.colId)
{
return '<div>' + render.data[obj_id] + '</div>';
}
}
return '<div></div>';
}
And the result looks like this:
Result image
Hope it helps!
I want to sort the columns in my grid, just like the rows. I have made a simple sort function that is called from an actioncolumn handler:
sortColumns:function(record) { // The record after which's values the columns are ordered
var columns = this.columns;
Ext.Array.sort(columns,function(col1,col2) {
if(record.get(col1.dataIndex) > record.get(col2.dataIndex)) return 1;
if(record.get(col1.dataIndex) < record.get(col2.dataIndex)) return -1;
if(col1.dataIndex > col2.dataIndex) return 1;
if(col1.dataIndex < col2.dataIndex) return 1;
throw new Error("Comparing column with itself shouldn't happen.");
});
this.setColumns(columns);
});
The setColumns line now throws the error
Cannot add destroyed item 'gridcolumn-1595' to Container 'headercontainer-1598'
which is because the "old" columns are destroyed first, and then the "new" columns, which are the same and thus destroyed, are applied.
I only want to change the order, but I didn't find any function to do it. Do you know how to do it?
Drag-drop ordering of the columns works, so it is doable; but I don't find the source code where sencha did implement that drag-drop thingy. Do you know where to look for that code?
Reconfigure method needs two arguments
grid.reconfigure(store, columns)
Here is the fiddle that changes the columns programatically https://fiddle.sencha.com/#fiddle/17bk
I have found that columns are items of the grid's headerCt, so the following works well, and unlike the other answers, it does not create new column components, keeping the column state and everything:
var headerCt = normalGrid.headerCt,
columns = headerCt.items.getRange();
Ext.Array.sort(columns,function(col1,col2) {
if(record.get(col1.dataIndex) < record.get(col2.dataIndex)) return -1;
if(record.get(col1.dataIndex) > record.get(col2.dataIndex)) return 1;
if(col1.dataIndex < col2.dataIndex) return -1;
if(col1.dataIndex > col2.dataIndex) return 1;
return 0;
});
headerCt.suspendLayouts();
for(var i=0;i<columns.length;i++)
{
headerCt.moveAfter(columns[i],(columns[i-1] || null));
}
headerCt.resumeLayouts(true);
There is a reconfigure method which can be used to achieve reordering, e.g:
grid.reconfigure(columns);
Check the this.
I couldn't manage to do it without storing columns in a custom field and using reconfigure, maybe someone can suggest something better (reconfigure doesn't work well with just regular columns field it seems):
Ext.define('MyGrid', {
extend: 'Ext.grid.Panel',
//just renamed "columns"
myColumnConfigs: [
//all your column configs
]
});
//to rearrange inside controller, also need to call it on grid render
var grid = this.getView();
var columns = grid.myColumnConfigs;
//...do your sorting on columns array
grid.reconfigure(columns);
I am looking into ways I can display the percent of a slice of pie compared to the current graph in the tooltip.
First I tried looking for something similar to chart.labelType: 'percent' but it looks like there is no such option.
What I am trying to do now is calculate the percentage inside chart.tooltip.contentGenerator according to documentation the function should be passed 5 arguments function (key, x, y, e, series) -> String however I am only receiving the first argument.
I am using angular 1.5.0, d3 3.5.16, nvd3 1.8.2, and angular-nvd3 1.0.5.
What is the best practice for displaying the percentage in the tooltip?
EDIT: You brought up a great point that I didn't account for, that the total (and thus the percentage portion of each pie segment) will change when you remove segments from the pie. Looked into how to account for this, and I discovered you can monitor the chart for a stateChange, and configure what happens when this event is dispatched.
So, what I've done is to update the total when that event is fired by filtering out whatever values are disabled:
chart: {
...,
dispatch: {
stateChange: function(e) {
total = _.reduce(_.filter($scope.data, function(value) {
return !value.disabled;
}), function(result, value, key) {
return result += parseFloat(value.y);
}, 0);
console.log(total);
}
},...
};
I've updated the example pie chart plunker with the new code, but everything else remained the same, except that I added in each key and the updated total into the tooltip so you can verify that it's working. But you'll still initialize the total value when the chart first loads:
var total = _.reduce($scope.data, function(result, value, key) {
return result += parseFloat(value.y);
}, 0);
...And use the chart.tooltip.contentGenerator method to customize the tooltip message, which you can set up to return something like this:
tooltip: {
contentGenerator: function (key, x, y, e, series) {
return '<h4>' + ((key.data.y / total) * 100).toFixed(2) + '% of total</h4>';
}
}
Hope that helps!
I have a Gridview on my page and I'm using buffered store. Is there a way to get the visible number of row count. Thank you
Here is a sample code that you can try: (I hope you'll get some idea from this)
// The below condition has to be checked for each record
// record: record instance
var me = this; // grid scope
Ext.Array.each(me.columns, function (item) { // iterate through each column in the grid
if (item.hidden || !item.dataIndex) { // you can avoid hidden columns and one's that re not bound to the store
return;
}
var cellVal;
try {
cellVal = Ext.fly( me.view.getCell(record, item)).select('cell selector class').elements[0].innerHTML;
} catch (e) {
// handle if you want
}
if (!Ext.isEmpty(cellVal)) {
// this record has been rendered
}
}, this);
This will get you all the records that are rendered. Since you are using a bufferedRenderer, this will also return the records that are rendered but not in the view, you can check and put an offset for the buffer.
Note: I've a similar logic in working in ExtJs 5 but haven't tested in touch.