How to get Ag Grid to display blank cell via cellRendererSelector

Question

I am trying to get a cell in my row/column grid to display as an empty cell or blank content given a certain case and as a CellRenderer type in another case. Currently I am doing:

cellRendererSelector: function (params) {
  const exampleCheckBox = {
    component: 'exampleCheckboxCellRenderer',
    params: {values: ['true', 'false']}
  };

  if (params.data.exampleField) {
    return exampleCheckBox;
  } else {
    return null; // HERE: null sets the string value of that field as a default cell
  }
},

In my else case above I want to return or show an empty cell or a cell with an empty string. Returning null only returns a default basic cell with the field value as a string.

Shuheb Ahmed Shuheb Ahmed · Accepted Answer · 2020-09-22T14:02:56

The cellRendererSelector is a function that returns the name of the component to be used as a renderer, or null.

You could try either of these two approaches:

Creating a Cell Renderer that returns an empty string, e.g. exampleEmptyRenderer:

if (params.data.exampleField) {
            return exampleCheckBox;
        } else {
            return exampleEmptyRenderer; 
        }

Inside the exampleCheckBox renderer, add logic to do the checking inside the init method to conditionally return what you want, as you have access to the node data:

ExampleCheckBoxCellRenderer.prototype.init = function (params) {
    this.eGui = document.createElement('div');

    if (params.data.exampleField) {
    // here return your renderer
        this.eGui.innerHTML = params.value;
    } else {
    // here return empty string
        this.eGui.innerHTML = ''
    }
}

How to get Ag Grid to display blank cell via cellRendererSelector

1 Answers