Grid Pro - Renderers
The grid-pro-renderers
enable you to render data in a way that is meaningful to the user. You can render each column differently and individually.
We currently support the following scenarios:
no renderer
built-in renderer
custom renderer
These are explained below.
no renderer
When you specify no renderer
in a Column Definition, the column is rendered as a string (raw value).
In some cases, this might not work as expected if the auto-cell-renderer-by-type
property in the target Grid Pro is set to true
.
built-in renderer
There are two cell renderers that are ready to use:
- Boolean
- Actions Menu
To use these, specify the cellRenderer
property and reference the renderer directly.
You can also configure boolean
automatically if the target Grid Pro is correctly configured.
In some cases, this might not work as expected if the auto-cell-renderer-by-type
property in the target Grid Pro is set to false
- which is the default.
boolean example
This adds a checkbox to the cell. To use this built-in renderer, follow these steps:
- Import it from
@genesislcap/grid-pro
:
import {GridProRendererTypes} from '@genesislcap/grid-pro'
- Add the renderer to your
cellRenderer
field:
public myBooleanColDef: ColDef = {
headerName: 'Is Active',
field: 'IS_ACTIVE',
cellRenderer: GridProRendererTypes.boolean,
};
- Use the renderer in your grid:
<foundation-grid-pro>
...
<grid-pro-column :definition=${x => x.myBooleanColDef}></grid-pro-column>
...
</foundation-grid-pro>
- Add the
auto-cell-renderer-by-type
attribute to your grid to enable this feature:
<foundation-grid-pro auto-cell-renderer-by-type>
...
</foundation-grid-pro>
This will show the new column with the boolean built-in renderer in your grid.
If you want to be able to click on the checkbox, you need to set the editable
property of the field to true
.
actionsMenu example
This adds a nested action menu to a cell in your grid. To implement this feature, you need to follow these steps:
- Import
getActionsMenuDef
from@genesislcap/grid-pro
:
import { getActionsMenuDef } from '@genesislcap/grid-pro';
- Define the menu items to be displayed:
public myActionsMenuColDef = getActionsMenuDef(
[
{
name: 'View',
callback: rowData => console.log('VIEW!!!', rowData),
},
{
name: 'Delete',
callback: rowData => console.log('DELETE!!!', rowData),
},
],
{
headerName: 'Test Actions',
width: 140,
},
'+',
);
Let's understand each part of the getActionsMenuDef()
:
- The first argument is the configuration of the nested menu. Each menu item must have:
name
: the name that will be displayed in the menu.callback
: the callback function to trigger an action. This callback function gives you access to the parameterrowData
. This is the data of the current row.
- The second argument is the other definitions of the
ColDef
, such asheaderName
,width
,pinned
... - The third argument is the string that will be displayed on the button. In the example above, this is "+".
Behind the scenes, the getActionsMenuDef
helper builds the "actions menu" ColDef
for you.
- Assign the variable
myActionsMenuColDef
to the grid-pro definition:
<foundation-grid-pro>
...
<grid-pro-column :definition=${x => x.myActionsMenuColDef}></grid-pro-column>
...
</foundation-grid-pro>
After these three steps, you will see the "actions menu" in the relevant cell.
Want to build it by yourself?
The built-in helper can be useful for common usage, but you can always build the ColDef
yourself. Below is an example of how to create your own ColDef
without the built-in renderer provided by Genesis.
const getActionsMenuDef = (
actions: AgActionMenuItem[],
overrideDef: ColDef = {},
customActionsOpenerName: string = '⋮') => {
const actionsMenuDef: ColDef = {
cellRenderer: GridProRendererTypes.actionsMenu,
cellRendererParams: {actions, buttonText: customActionsOpenerName},
cellStyle: {border: 'none', overflow: 'visible'},
field: 'actions',
headerName: 'Actions',
width: 150,
};
return {...actionsMenuDef, ...overrideDef};
};
custom renderer
A custom renderer can be either a function or a full custom component. See the Genesis Grid Pro Cell section or Genesis Columns Definition for more information and examples.