Radio Buttons in ag-grid - ag-grid

I am using ag-grid to display my data and i have below question:
1.Instead of check boxes i want radio buttons to be displayed when i expand the group and also my grouping is not working as expected.?
Plunkr link for the above grid what i tried so far https://plnkr.co/edit/KahAzPv6QEccaaRKlzCN?p=preview
var gridOptions = {
columnDefs: [
{headerName: "Jobs",field: "job", width: 90,rowGroupIndex: 0 ,hide:true},
// this tells the grid what values to put into the cell
//showRowGroup: 'position'
// this tells the grid what to use to render the cell
// cellRenderer:'agGroupCellRenderer'
//{field: 'position', rowGroup: true, hide: true},
{headerName: "Name", field: "name"}
],
rowData: [
{position:'Developer',name:'Test1',job:'Position'},
{position: 'Manager', name:'Test2',job:'Position'},
{position: 'Musician',job:'Position'},
{position: 'Manager',name:'Test4',job:'Position'},
{position: 'Europe',job:'Location'},
{position: 'Australia',name:'Test4',job:'Location'}
],
/* autoGroupColumnDef:{
headerName:'',
cellRendererParams:{
suppressCount: true,
checkbox:true
}
}*/
autoGroupColumnDef: {
headerName: "Jobs",
field: "position",
width: 250,
cellRenderer:'agGroupCellRenderer',
cellRendererParams: {
checkbox: true
}
}
};

Related

How to properly render a button or icon inside Data Grid column?

i have a Data Grid table, there's a colomn that holds actions (edit and delete):
(Below is my whole code)
import React, { useEffect } from 'react'
import { DataGrid } from '#mui/x-data-grid'
import { useNavigate } from 'react-router-dom'
import EditIcon from '#mui/icons-material/Edit'
import DeleteForeverIcon from '#mui/icons-material/DeleteForever'
import { Button } from '#mui/material'
const rows = [
{
id: 1,
lastName: 'Snow',
firstName: 'Jon',
age: 35,
edit: EditIcon,
delete: `${(<Button variant="text">Text</Button>)}`,
},
]
const Colors = () => {
const columns = [
{ field: 'id', headerName: 'ID', width: 70 },
{ field: 'firstName', headerName: 'First name', width: 130 },
{ field: 'lastName', headerName: 'Last name', width: 130 },
{
field: 'age',
headerName: 'Age',
type: 'number',
width: 90,
},
{ field: 'edit', headerName: 'Edit', width: 150 },
{ field: 'delete', headerName: 'Delete', width: 150 },
]
return (
<div style={{ height: 560, width: '100%' }}>
<DataGrid
sx={{ backgroundColor: 'white' }}
rows={rows}
columns={columns}
pageSize={8}
rowsPerPageOptions={[8]}
checkboxSelection
/>
</div>
)
}
export default Colors
Now my problem is, i would like to use a material icon inside edit column.
I tried by implementing icon directly like this:
const rows = [
{
id: 1,
lastName: 'Snow',
firstName: 'Jon',
age: 35,
edit: EditIcon, //<--
},
]
Or calling a button by this way:
const rows = [
{
id: 1,
lastName: 'Snow',
firstName: 'Jon',
age: 35,
delete: `${(<Button variant="text">Text</Button>)}`, //<--
},
]
Result: i'm getting a render [object object] instead of icon or button.
How to properly render a button or icon inside Data Grid column?
I think you can try doing this. MUI exposes an actions column type that you can pass custom icons and implementations to. If you scroll down a bit on this link you can find a lot of column options.
Actions column
import { GridActionsCellItem, GridRowParams } from "#mui/x-data-grid-pro";
import EditIcon from "#mui/icons-material/Edit";
{
field: "actions",
type: "actions",
align: "left",
headerName: t("actions"),
getActions: (params: GridRowParams) => [
<GridActionsCellItem
key={0}
icon={<EditIcon titleAccess={t("edit")} color="primary" />}
label={t("edit")}
onClick={() => handleEditPressed(params)}
/>,
],
},
I fixed my problem by using renderCell, with this i can render html inside grid data the way i want (i can put button for exemple):
{
field: 'edit',
headerName: 'Edit',
width: 70,
renderCell: (params) => {
return <EditIcon /> //<-- Mui icons should be put this way here.
},
},

antd column chart: label value is displayed outside of chart

I have a fairly simple ant column chart, this is it:
import React from "react";
import ReactDOM from "react-dom";
import { Column } from "#ant-design/plots";
const DemoColumn = () => {
const data = [
{
type: "Value 1",
value: 315801
},
{
type: "Value 2",
value: 222095
},
{
type: "Value 3",
value: 10800
}
];
const config = {
data,
loading: data.length === 0,
xField: "type",
yField: "value",
seriesField: "type",
yAxis: {
label: {
formatter: (v) => v
}
},
xAxis: false,
height: 200,
autoFit: false,
legend: {
position: "bottom",
flipPage: false
},
interactions: [
{
type: "element-active"
}
],
label: {
position: "top",
offsetY: 8,
formatter: ({ value }) => value
}
};
return <Column {...config} />;
};
ReactDOM.render(<DemoColumn />, document.getElementById("container"));
The problem is, that the number of Value 1 is hanging off the chart. I tried setting the padding but this did not help, it acutally screwed the whole chart up?!?
Here is also a fiddle: https://codesandbox.io/s/cool-microservice-gbrbm9?file=/index.js:0-929
Fixed it myself by adding
appendPadding: 10
There is an Open Bug in AntD GitHub [BUG] Label of column charts are being cut out if label position is set to 'top' officials for this issue. Some member of ant design team has given an answer as set limitInPlot: true in config. I tried that but didn't work.
I tried with adjusting height prop and offsetY in lable prop inside config. This is just tricky option for you to achieve what you want.
Option 1 -
label: {
position: "top",
offsetY: 15, // change offset to this then value will not crop as before but just overlap with chart.
formatter: ({ value }) => value
}
Option 2 -
xAxis: false,
height: 750, // increase the chart height and it will show the value with a gap. But this will create a scroll.
autoFit: false,
Option 3 -
You can use mix of above two options with adjusting right values. This will get what you want without a scroll. below values got this result.
xAxis: false,
height: 500, // adjust height
autoFit: false,
legend: {
position: "bottom",
flipPage: false
},
interactions: [
{
type: "element-active"
}
],
label: {
position: "top",
offsetY: 12, // adjust offset
formatter: ({ value }) => value
}
This is the sandboxcode.
Hope this will help to overcome your issue.

AG-Grid FillHandle Increment Value Cross Row Groups

Example at https://plnkr.co/edit/0CPdb8dXPCafCJjI
const gridOptions = {
columnDefs: [
{ field: 'athlete',
minWidth: 150,
rowGroup: true,
hide: true, },
{ field: 'year', maxWidth: 90 },
],
defaultColDef: {
flex: 1,
minWidth: 100,
editable: true,
},
enableRangeSelection: true,
enableFillHandle: true,
fillHandleDirection: "y",
groupDisplayType: "groupRows",
groupDefaultExpanded: 1,
};
Grid has row groups. Selecting 2004, holding down "alt" and dragging down increases the value in column "Year" as intended. The issue comes when dragging over to a new group. I would like first row for "Natalie Coughlin" to be 2006, but it seems like AG grid is counting group row header as a regular row.
Anyone know how to accomplish this?

Bind ag-grid with array

I have an array with values array=[3,4].I have to display the ag-grid values if it matches with array values.This is what i tried so far:
Attached is the plunkr :https://plnkr.co/edit/fKrvfzFYjdLbTLjFkqpY?p=preview
var array=[3,4];
var columnDefs = [
{headerName: "Jobs",field: "job", width: 90},
{headerName: "Location", field: "loc", width: 120 },
{headerName: "Value", field: "value", width: 120 }];
var rowData =[{job:'Developer',loc:'X',value:1},
{job: 'Manager',loc:'Y',value:2},
{job: 'Musician',loc:'Z',value:3},
{job: 'Manager',loc:'A',value:4},
{job: 'Tester',loc:'B',value:5},
{job: 'DBA',loc:'C',value:6}
];
var gridOptions = {
defaultColDef: {
sortable: true
},
columnDefs: columnDefs,
animateRows: true,
enableRangeSelection: true,
rowData: rowData,
checkbox : true
};
How to display the grid when value field value matches with array values.
Here is a plunkr with a working example - https://plnkr.co/edit/xdwI0Tql9I5n71D4QSDy?p=preview
Add a custom cellRenderer function like so in the column definition of values column
{
headerName: "Value",
field: "value",
width: 120,
cellRenderer: params => array.includes(params.value) ? params.value : ''
}

How to hide column in AG-Grid?

How to hide the column in AG-Grid and also it should not be displayed in Tool Panel...
var columnDefs = [{ headerName: "Stone_ID", field: "Stone_ID", width: 100, hide: "true" }]
You can set the column property of suppressToolPanel to true to achieve that.
var columnDefs = [
{
headerName: "Stone_ID",
field: "Stone_ID",
width: 100,
hide: true,
suppressToolPanel: true
}
]
If you are looking for dynamically show/hide columns follow below:
You can use either setColumnVisible or setColumnsVisible.
NOTE: those functions expect a colKey(s) which is related to the field you set in columnDefs.
columnDefs = [
{
headerName: "Name",
field: "name", // => that!
width: 150
},
{
headerName: "Last Name",
field: "last_name", // => that!
width: 150
},
// ...
];
When using setColumnVisible you can show/hide a single column
gridOptions.columnApi.setColumnVisible('name', false) //In that case we hide it
When using setColumnsVisible you can show/hide multiple columns
gridOptions.columnApi.setColumnsVisible(['name', 'last_name'], true) //In that case we show them
To do this programatically you can use:
Hide columns:
this.agGrid.columnApi.setColumnsVisible(["COL_ID_1", "COL_ID_2"], false);
Show columns:
this.agGrid.columnApi.setColumnsVisible(["COL_ID_1", "COL_ID_2"], true);
To do this for a whole column group you can use:
const group = this.columnApi.getColumnGroup("MY_GROUP");
group.children.forEach(child => this.columnApi.setColumnsVisible(child, false));
Posting late but It may helpful for others with some extra details:
If you want to hide your column on the grid you can use hide property to hide that column from the grid.
Only hide from grid colDef example:
colMainDef = [
{
headerName: 'Approved',
field: 'status',
hide: true
}]
But the same column will still be accessible on the side menu panel if you want to hide it from the side menu you can use one more property suppressColumnsToolPanel by making this true it will hide the column from the side menu.
Hide column from the grid as well as from side panel colDef example:
colMainDef = [
{
headerName: 'Approved',
field: 'status',
suppressColumnsToolPanel: true,
hide: true,
}]
Hope this will helps to hide/show columns as per your requirements.
var columnDefs = [{ headerName: "Stone_ID", field: "Stone_ID", width: 100, hide: true }]
{
...,
hide: true,
suppressColumnsToolPanel: true
}
In the package.json:
"dependencies": {
"#ag-grid-community/angular": "^24.1.0",
"#ag-grid-enterprise/all-modules": "^24.1.0",
...
}
hide: should get the value true, not the string "true" (like width: gets 100, not "100")
Just add "hide: true" in your column definition.
Ex:
var columnDefs = [{ headerName: "ABC", field: "XYZ", hide: true }]
hide column on load
{
headerName: 'ROE',
field: 'roe',
width: 100,
hide: true
},
based on selection you can show/hide it using
example
this.gridColumnApi.setColumnVisible('roe',true);
We can hide column dynamically in the following way using onColumnVisible listen event
const onColumnVisible = useCallback(params => {
if (params.source === 'toolPanelUi') {
const colId = params.column ? [ params.column.colId ] : params.columns.map(col => col.colId)
const value = columns.map(v => {
if (v.colId === colId.find(c => c === v.colId)) {
params.visible ? v.hide = false : v.hide = true
}
return v
})
if (value) {
setColumns(value)
}
}
}, [ gridParams, setColumns ])
<Grid onColumnVisible={onColumnVisible } />