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!
Related
We are using "ag-grid-community": "26.2.0" and "ag-grid-react": "26.2.0" packages in our project. We have implemented a wrapper reusable component which we're planning to use across the application.
The requirement states that checkbox selection and the first column are to be pinned to the left by default.
Column Definitions:
const colDefs = [
{
headerName: "Vulnerability Title",
field: "patchName",
cellRendererFramework: patchListRenderers.patchNameRenderer,
pinned: "left", // pinned property
minWidth: 300,
},
{
headerName: "Status",
field: "vulnerabilityStatus",
minWidth: 180,
},
{
headerName: "Vulnerability ID",
field: "cveId",
minWidth: 210,
},
// more column definitions here
]
My gridOptions are this:
export const gridProps = {
reactUi: true,
rowHeight: 70,
headerHeight: 70,
rowSelection: "multiple",
suppressRowClickSelection: true,
pagination: true,
paginationPageSize: 10,
suppressPaginationPanel: true,
enableCellTextSelection: true,
ensureDomOrder: true,
suppressDragLeaveHidesColumns: true,
suppressColumnVirtualisation: true,
popupParent: document.querySelector("body"),
};
I am facing a weird issue where the pinned column headers are shown, but the data underneath is missing, however, once I drag around the pinned column a bit, everything comes back in its proper place. Please refer to the GIFs attached.
Things I've tried:
Changed the width values,
Tried true and false for suppressColumnVirtualisation property.
Tried to use gridApi.redrawRows() and gridApi.refreshCells() on the onGridReady event.
None of these suggestions worked.
GIF 1
GIF 2
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)
}];
I'm trying to include a uib-popover inside of an ag-grid cell. However, the popover is getting cut off (by the grid's overflow settings). What is the best way to make this work?
Here is the code that sets up the grid:
function _setGridOptions() {
$ctrl.agGridOptions = {
suppressHorizontalScroll: true,
suppressColumnVirtualization: true,
angularCompileRows: true,
rowHeight: 64,
columnDefs: [
{headerName: "", width: 30, checkboxSelection: true, suppressSorting: true, suppressMenu: true, pinned: true},
{headerName: "Sender", field: "submitterName", tooltipField: "submitterName", cellClass: "sender_name"},
{headerName: "Package", field: "packageName", tooltipField: "packageName"},
{headerName: "Document", cellRenderer: $ctrl._documentNameRenderer},
{headerName: "Document Status", cellRenderer: $ctrl._stateRenderer},
{headerName: "Recording Date", cellRenderer: $ctrl._recordingDateRenderer},
{headerName: "", template: '<div style="height: 40px;"></div><div uib-popover="I appeared on mouse enter!" popover-trigger="\'mouseenter\'">hover</div>'}
],
onGridSizeChanged: function () {
$ctrl.agGridOptions.api.sizeColumnsToFit();
},
onGridReady: function (param) {
$ctrl.agGridOptions.api = param.api;
if ($ctrl.search_results) {
$ctrl.agGridOptions.api.setRowData($ctrl.search_results);
$ctrl.agGridOptions.api.doLayout();
}
}
};
}
And this is what it looks like when you hover over the div...
A co-worker pointed me to the solution...
All you have to do is add 'popover-append-to-body="true"'
This will attach the popover to the body tag instead of the parent, so that the overflow settings do not affect it.
I use ag-grid with Angular 1.5 and I have defined 5 columns in the following format in an array:
[
{headerName: 'Username', width: 150, field: 'username'},
{headerName: 'Full Name', width: 150, field: 'full_name'},
{headerName: 'Location', width: 150, field: 'location'},
{headerName: 'Email', width: 150, field: 'email'},
{headerName: 'Check In Comment', width: 370, field: 'comment'},
];
The rendering shows 6 columns with the right-most one being blank. I've tried everything, but I cannot still remove the blank column. See the :
gridOptions:
options = {
rowData: dataArray,
rowModelType: 'pagination',
columnDefs: getColumnDefs(),
enableColResize: true,
enableSorting: false,
enableFilter: true,
rowHeight: 25,
angularCompileRows: true,
suppressRowClickSelection: true
};
The html code:
<div style="width: 100%;"
ag-grid="vm.gridOptions"
class="ag-fresh ag-basic">
</div>
I wonder how to remove the blank column right to the 'Check In Comment' column. any ideas?
Have you tried gridOptions.api.sizeColumnsToFit() ?
Source (7min 50sec)
extra column is there even if we use that api gridOptions.api.sizeColumnsToFit().