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:

1. Import it from @genesislcap/grid-pro:

import {GridProRendererTypes} from '@genesislcap/grid-pro'

2. Add the renderer to your cellRenderer field:

Cell Renderer can be specified in a ColDef

public myBooleanColDef: ColDef = {
  headerName: 'Is Active',
  field: 'IS_ACTIVE',
  cellRenderer: GridProRendererTypes.boolean,
};

3. Use the renderer in your grid:

Using the ColDef with a boolean cell renderer

<foundation-grid-pro>
  ...
  <grid-pro-column :definition=${x => x.myBooleanColDef}></grid-pro-column>
  ...
</foundation-grid-pro>

4. 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.

tip

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:

1. Import getActionsMenuDef from @genesislcap/grid-pro:

GridProActionMenuItem config array used to generate the Actions Menu ColDef

import { getActionsMenuDef } from '@genesislcap/grid-pro';

2. 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 parameter rowData. This is the data of the current row.
• The second argument is the other definitions of the ColDef, such as headerName, 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.

3. Assign the variable myActionsMenuColDef to the grid-pro definition:

Using the ColDef with an actions menu cell renderer

<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.

You can use 'overrideDef' to override all the default values used in this helper

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.