Dash AG-Grid custom cellEditorSelector

Dash Python
1

Hi,

I’m using AG-Grid through dash to create some grids with the purpose of automating calculations. For these grids to be easier for users to utilise, I need to add some custom options for certain cells in a column. These options cant be general for all cells within a column and will depend on a value in a different column.

I’ve identified an example in AG-Grid documentation which is exactly what I’m after but I am having trouble turning their JS code into something that dash ag grid can read and execute.

The code is as follows;

cellEditorSelector: params => {

if (params.data.type === ‘age’) {
return {
component: NumericCellEditor,
}
}

if (params.data.type === ‘gender’) {
return {
component: ‘agRichSelectCellEditor’,
params: {
values: [‘Male’, ‘Female’]
}
}
}

if (params.data.type === ‘mood’) {
return {
component: MoodEditor,
popup: true,
popupPosition: ‘under’
}
}

return undefined
}

I’ve also attached an image of the code.

image
image796×560 29.2 KB

Could anyone please help me in modifying the code for it to work in dash ag grid.

Thanks again :slight_smile:

2

Hi @Ash_Nathan

There is an example of how to use custom cell renders in different rows of the same column in the docs here:

Note that in your example that you posted, it’s using the agRichSelectCellEditor which requires an AG Grid Enterprise license. If you don’t have an Enterprise license, you can try using the community component agSelectCellEditor

3

Hi @AnnMarieW,

Thanks for the prompt reply. I’ve managed to set up the multiple renderers using the below code:

dagfuncs.cellEditorSelector = function (params) {
    const selectedColumn = params.data.column;

  if (selectedColumn === 'Area') {
    return {
      component: 'agNumberCellEditor',
      params: {
        min: 0
      }
    }
  }

  else if (['Fuel Oil', 'Propane',
    'District Cooling', 'District Heating', 'Renewables', 'Heatpump',
    'Wood', 'Natural Gas'].includes(selectedColumn))  {
    return {
      component: 'agSelectCellEditor',
      params: {
        values: ["Yes", "No", "Unknown"],
        valueListGap: 10,

      }
    }
  }

  else if (selectedColumn === 'Property Type') {
    return {
      component: 'DMC_Select',
      params: {
        values: ['Residential - Single-family', 'Residential - Multi-family',
            'Residential', 'Hotel', 'Office', 'Industrial - Distribution Warehouse Warm',
            'Industrial - Distribution Warehouse Cold', 'Retail - High Street',
            'Retail - Shopping Centre', 'Retail - Warehouse', 'Retail',
            'Health Care', 'Lodging, Leisure & Recreation', 'Mixed Use',
            'NOT COVERED'],
      }
    }
  }

  else if (selectedColumn === 'Country Code\n(ISO 2)') {
    return {
        component: 'agSelectCellEditor',
        params: {
            values: ['AL', 'AU', 'AT','BE','BA','BR','BG','CA','CN','CI','HR','CY','CZ','DK','EE',
            'FI','FR','GP','MQ','GF','RE','PM','YT','MF','WF','PF','GE','DE','GR','HK',
            'HU','IS','IN','IE','IT','JP','XK','LV','LT','LU','MO','MY','MT','MX','MD','ME','NL',
            'NZ','MK','NO','PH','PL','PT','RO','RS','SG','SK','SI','KR','ES','SE','CH','GB','US',
            'EU'],
            valueListMaxHeight: 120,
        }

    }
  }

  return undefined
}

However, I can’t seem to access the data stored in those selects. They do not show up in the rowData of the table. Do you know how I can retrieve the data inputted pls?

Best,
Yoann

4

You might find this helpful: