Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

AG-Grid: show certain "action" buttons in grid depending on condition

I'm using the community edition of "AG Grid" in my Angular 6 application.

My challenge right now is this: I have a fairly simple data structure, a list of which gets bound to the grid for display. Based on its values, I'd like to add an "Actions" column to the grid, to give the user access to certain actions, e.g. delete an entry, "promote" it etc.

For individual data-bound column, I get the corresponding data value of each row as it's being bound, and I can e.g. format the display using a cell renderer. I was hoping I'd be able to do soemthing similar with my "Actions" column (which isn't bound to a specific data element of the class) - but it seems my "action cell renderer" doesn't get anything to base its decisions on.

I have a data structure something like this:

export interface Indicator {
    Id: string;
    Name: string;
    IsGlobal: boolean;
}

An array of these Indicators is being bound to the AG-grid in the OnInit function of my Angular component.

I define my column of the AG-grid to be:

columnDefs = [
    { headerName: 'Name', field: 'Name', width: 200, editable: true },
    { headerName: 'Global', field: 'IsGlobal', editable: false, width: 100,
      cellRenderer: (data) => { 
        // here, "data" refers to the "IsGlobal" value of the row being displayed
        if (data.value === true) {
          return 'Ja';
        } else {
          return 'Nein';
        }
      },
    },
    { headerName: 'Actions', width: 125,
        cellRenderer: (data) => {
            // here, I was hoping the "data" would refer to the entire
            // row / object being bound, so that I could check for 
            // certain conditions to be true (or false)
            if (data.IsGlobal.value === true) 
            {
                return '<span class="far fa-trash-alt mr-2" title="Delete entry"></span>' +
                       '<span class="fab fa-nintendo-switch" title="Promote entry"></span>';
            }      
            else
            {
                return '<span class="far fa-trash-alt mr-2" title="Delete"></span>';
            }
        }
    }
  ];

I'd like to be able to define in my column definitions that my action column shows a "promote entry" button only IF the data of the row currently in question has IsGlobal = false. I was hoping the data being passed into the cell renderer would be the whole row data object (of type Indicator) - but that doesn't seem to be the case.

How can I decide which icons to show, in the "Actions" column, in my column definitions?

like image 570
marc_s Avatar asked Oct 11 '18 07:10

marc_s


People also ask

What is agInit in Ag grid?

agInit() is called once (with the corresponding cell's parameters supplied). The component's GUI will be inserted into the grid 0 or 1 times (the component could get destroyed first, i.e. when scrolling quickly). refresh() is called 0...n times (i.e. it may never be called, or called multiple times).

What is gridOptions in Ag grid?

The gridOptions object is a 'one stop shop' for the entire interface into the grid, commonly used if using plain JavaScript. Grid options can however be used instead of, or in addition to, normal framework binding. The example below shows the different types of items available on gridOptions .

What is defaultColDef in Ag grid?

In addition to the above, the grid provides additional ways to help simplify and avoid duplication of column definitions. This is done through the following: defaultColDef : contains properties that all columns will inherit. defaultColGroupDef : contains properties that all column groups will inherit.


1 Answers

on cellRenderer - you will get params value which represents an object :

interface ICellRendererParams {
    value: any, // value to be rendered
    valueFormatted: any, // value to be rendered formatted
    getValue: ()=> any, // convenience function to get most recent up to date value
    setValue: (value: any) => void, // convenience to set the value
    formatValue: (value: any) => any, // convenience to format a value using the columns formatter
    data: any, // the rows data
    node: RowNode, // row rows row node
    colDef: ColDef, // the cells column definition
    column: Column, // the cells column
    rowIndex: number, // the current index of the row (this changes after filter and sort)
    api: GridApi, // the grid API
    eGridCell: HTMLElement, // the grid's cell, a DOM div element
    eParentOfValue: HTMLElement, // the parent DOM item for the cell renderer, same as eGridCell unless using checkbox selection
    columnApi: ColumnApi, // grid column API
    context: any, // the grid's context
    refreshCell: ()=>void // convenience function to refresh the cell
}

So to get access to row-data you need to use params.data or params.node.data

cellRenderer: (params) => {
    if (params.data.IsGlobal.value === true) 
    {
        ...
    }      
    else
    {
        ...
    }
}

But remember, when you will use inline cellRenderer - you can implement just HTML template (no logic), for logic handling you need to create custom cellRenderer which will contain needed functions and so on.

you wouldn't be able to execute component functions through cellRenderer inline implementation

like image 192
un.spike Avatar answered Oct 20 '22 00:10

un.spike