I have a ag-grid row group example setup here: https://plnkr.co/edit/lOOhfLcpuNbIgXO5e7Wy?p=preview
var columnDefs = [
{
headerName: 'country',
rowGroup: 'true',
showRowGroup: true,
cellRenderer:'agGroupCellRenderer',
field: 'country',
cellRendererParams: {
suppressCount: true,
checkbox: false,
innerRenderer: 'simpleCellRenderer',
suppressDoubleClickExpand: true,
suppressEnterExpand: true
}
},
{headerName: 'City', field: 'city', cellRenderer:'agGroupCellRenderer', cellRendererParams: {
suppressCount: true,
checkbox: false,
innerRenderer: 'simpleCellRenderer',
suppressDoubleClickExpand: true,
suppressEnterExpand: true
}}
];
In this example I am specifying suppressCount to be true, after which I expected to see the row count of only countries but the grid shows a total row count of 27. How do I make it count only the unique countries and ignore the rows for each city.
reference: https://www.ag-grid.com/javascript-grid-cell-rendering/#gsc.tab=0
Related
I am working on grid using AgGridReact and enabling rowGrouping by setting it to true. However, it only adds the column "Group" but no actual grouping happens
const columnDef = [
{field: "module", width: 120, rowGroup: true, hide: true},
{headerName: "Ref Name", field: "referenceName", width: 120, },
{headerName: "ID", field: "referenceId", width: 120, }
]
const gridOptions = {
columnDefs: columnDef,
animateRows: true,
defaultColDef: {
sortable: true,
resizable: true,
enableRowGroup: true
},
rowData: mediaUsage
}
As you can see in the below image, it only adds GROUP column but no actual label appears
It should be group by Module column which is below
I've watched multiple tutorials and it's the rowGroup property that will display the grouping, but it doesnt in my case. Hope anyone could help. Thanks!
I built a grid using ag-grid,
for one of the column I sent custom cell editor to render my own date component,
this column have also valueGetter to format the value to display,
my problem is: the cell editor get the formmated value, that returned from valueGetter, I want to have there the source value, how can I do it?
here is the definition of my columns object:
const columnsObject = [
{
field: 'date',
colId: 'date',
headerName: 'date',
filter: true,
sortable: true,
unSortIcon: true,
resizable: true,
valueGetter: row => row.data.date && moment(row.data.date).format('YYYY-MM-DDTHH:mm'),
editable: true,
cellEditor: 'dateEditor',
cellEditorParams: {
name: 'startDate',
}
},
{
field: 'text',
colId: 'text',
headerName: 'text',
filter: true,
resizable: true,
editable: true,
},
];
My dateEditor should get the value with time (YYYY-MM-DDTHH:mm format), but in the view after stop editing it should be only time (YYYY-MM-DD format).
using valueFormatter instead of valueGetter solved my problem
I am using React-data-grid with Filter options in the table. For some column cells, i am passing a DOM object (not as a string). And for this column, the filter functionality is not working.
this._columns = [
{
key: 'date',
name: 'Shipment date',
width: 220,
sortable: true,
filterable: true,
},{
key: 'price',
name: 'Shipment Price',
width: 220,
sortable: true,
filterable: true,
}];
And here are the Rows...
let rows = [];
_.each(response, function(value, index){
rows.push({
date: value.date
price: <div>{value.currencySymbol} <span>{value.price}</span></div>
})
});
So, this is my Column Metadata , and Rows. I am passing this metadata to ReactDataGrid Component.
Now the date filter is working fine. However this price filter is not working well due to this inline DOM element.
Can Someone please help me to get this solved?
Resolved this by using 'formatter' or else we could use 'getRowMetaData'
formatter: an adaptor/middleware for rendering the value in DOM
getRowMetaData: it is used to get the adjacent cell values of the row. And, We could achieve using props.dependentValues where it will have all the column data of the row. I used this in 'Shipment Price' column, to get the other column values of that row.
this._columns = [
{
key: 'date',
name: 'Shipment date',
width: 220,
sortable: true,
filterable: true,
formatter: (props)=>(<div style={{border: '0px'}}>{props.value}</div>),
},{
key: 'price',
name: 'Shipment Price',
width: 220,
sortable: true,
filterable: true,
formatter: (props) => (this.getTrackingUrl(props.dependentValues.rawObj, props.dependentValues.indexVal)),
getRowMetaData: (row) => (row)
}];
In a grid column editable (ExtJs v4.2.2), how to change the store dynamically ?
The point is to load store with different params by type of movement(movementTypeId):
the field with diffrent list to be attached is 'Reason', columns are:
this.columns = [
{
text: 'id',
dataIndex: 'movementId',
sortable: false,
hideable: true,
sortableColumn: false,
hidden: true,
flex : 1,
scope:this
},
{
text: 'TypeId',
dataIndex: 'movementTypeId',
sortable: false,
sortableColumn: false,
hideable: true,
sortableColumns: false,
hidden: true,
flex : 2,
scope:this
},
{
text: 'Reason',
dataIndex: 'movementReasonId',
sortable: false,
hideable: true,
sortableColumn: false,
field: {
xtype: 'combobox',
align: 'center',
typeAhead: true,
triggerAction: 'all',
//selectOnTab: true,
store: this.storeMovementReasonType,
displayField: 'label'
},
flex : 3,
scope:this
},
];
So for every row, when store is on load wanted to set extra param like:
if(movementTypeId === 89){
storeMovementReasonType.getProxy().setExtraParam('dictionaryTypeId',11);
}
if(movementTypeId === 94){
storeMovementReasonType.getProxy().setExtraParam('dictionaryTypeId',8);
}
is it possible ?
Thanks for your time :)
You want to implement the beforeedit listener on your rowediting plugin:
listeners:{
beforeedit:function(editor , context , eOpts) {
var movementTypeId = context.record.get("movementTypeId");
if(movementTypeId === 89){
storeMovementReasonType.getProxy().setExtraParam('dictionaryTypeId',11);
}
if(movementTypeId === 94){
storeMovementReasonType.getProxy().setExtraParam('dictionaryTypeId',8);
}
storeMovementReasonType.load();
}
}
I am trying to group a row based on a condition. I have 2 columns in my table, User and group.
If the value of group is blank, I want to keep those rows ungrouped.
Trying to achieve this grouping
Right now the rows are also grouped for the rows where group value is blank.
Current grouping which I have acheived
Below is my grid, I have marked my column Group as a grouping.
$scope.gridOptionsUserGroup = {
enableFiltering: true,
enableColumnResizing: true,
resize:false,
enableSorting: true,
enableColumnMenus: false,
enableSelectAll: true,
enableRowSelection: true,
enableFullRowSelection:true,
enableRowHeaderSelection:true,
enableGroupHeaderSelection: true,
multiSelect: true,
enableGridMenu: true,
showGroupPanel: true,
rowHeight: 30,
groups: ['grouping'],
columnDefs: [{ field: 'grouping', displayName: 'Group' ,grouping: { groupPriority: 0 },
sort: { priority: 1, direction: 'asc' }},
{ field: 'userName', displayName: 'User Name' }
],
};