AG Grid Enterprise Rich Cell Select Editor

This question was asked on GitHub, so I’m posting it here to make it easier to find. This isn’t in the Dash AG Grid docs yet, but it’s available in Dash AG Grid >= 31.0.0

Note that the Rich Select Cell Editor is an AG Grid Enterprise feature. Find out more information on AG Grid Licensing and pricing in the AG Grid Doc.

Note that the cool color cell renderer (and many many other great features) ares available in the Free AG Grid Community version :slight_smile:

Rich Select Cell Editor

An AG Grid Enterprise Feature

An alternative to using the browser’s select popup for dropdowns inside the grid.

The Rich Select Cell Editor allows users to enter a cell value from a list of provided values by searching or filtering the list.

Allow Typing

The editor input can be configured to allow text input, which is used to match different parts of the editor list items as shown below:
ag-grid-rich-cell-select


from dash import Dash, html
import dash_ag_grid as dag
import pandas as pd

app = Dash(__name__)


colors = [
  'AliceBlue',
  'AntiqueWhite',
  'Aqua',
  'Aquamarine',
  'Azure',
  'Beige',
  'Bisque',
  'Black',
  'BlanchedAlmond',
  'Blue',
  'BlueViolet',
  'Brown',
  'BurlyWood',
  'CadetBlue',
  'Chartreuse',
  'Chocolate',
  'Coral',
  'CornflowerBlue',
  'Cornsilk',
  'Crimson',
  'Cyan',
  'DarkBlue',
  'DarkCyan',
  'DarkGoldenrod',
  'DarkGray',
  'DarkGreen',
  'DarkGrey',
  'DarkKhaki',
  'DarkMagenta',
  'DarkOliveGreen',
  'DarkOrange',
  'DarkOrchid',
  'DarkRed',
  'DarkSalmon',
  'DarkSeaGreen',
  'DarkSlateBlue',
  'DarkSlateGray',
  'DarkSlateGrey',
  'DarkTurquoise',
  'DarkViolet',
  'DeepPink',
  'DeepSkyBlue',
  'DimGray',
  'DodgerBlue',
  'FireBrick',
  'FloralWhite',
  'ForestGreen',
  'Fuchsia',
  'Gainsboro',
  'GhostWhite',
  'Gold',
  'Goldenrod',
  'Gray',
  'Green',
  'GreenYellow',
  'Grey',
  'Honeydew',
  'HotPink',
  'IndianRed',
  'Indigo',
  'Ivory',
  'Khaki',
  'Lavender',
  'LavenderBlush',
  'LawnGreen',
  'LemonChiffon',
  'LightBlue',
  'LightCoral',
  'LightCyan',
  'LightGoldenrodYellow',
  'LightGray',
  'LightGreen',
  'LightGrey',
  'LightPink',
  'LightSalmon',
  'LightSeaGreen',
  'LightSkyBlue',
  'LightSlateGray',
  'LightSlateGrey',
  'LightSteelBlue',
  'LightYellow',
  'Lime',
  'LimeGreen',
  'Linen',
  'Magenta',
  'Maroon',
  'MediumAquamarine',
  'MediumBlue',
  'MediumOrchid',
  'MediumPurple',
  'MediumSeaGreen',
  'MediumSlateBlue',
  'MediumSpringGreen',
  'MediumTurquoise',
  'MediumVioletRed',
  'MidnightBlue',
  'MintCream',
  'MistyRose',
  'Moccasin',
  'NavajoWhite',
  'Navy',
  'OldLace',
  'Olive',
  'OliveDrab',
  'Orange',
  'OrangeRed',
  'Orchid',
  'PaleGoldenrod',
  'PaleGreen',
  'PaleTurquoise',
  'PaleVioletRed',
  'PapayaWhip',
  'PeachPuff',
  'Peru',
  'Pink',
  'Plum',
  'PowderBlue',
  'Purple',
  'Rebeccapurple',
  'Red',
  'RosyBrown',
  'RoyalBlue',
  'SaddleBrown',
  'Salmon',
  'SandyBrown',
  'SeaGreen',
  'Seashell',
  'Sienna',
  'Silver',
  'SkyBlue',
  'SlateBlue',
  'SlateGray',
  'SlateGrey',
  'Snow',
  'SpringGreen',
  'SteelBlue',
  'Tan',
  'Teal',
  'Thistle',
  'Tomato',
  'Turquoise',
  'Violet',
  'Wheat',
  'White',
  'WhiteSmoke',
  'Yellow',
  'YellowGreen',
]
df = pd.DataFrame({"color": colors})

columnDefs = [
  {
    'headerName': 'Allow Typing (Match)',
    'field': 'color',
    'cellRenderer': 'ColourCellRenderer',
    'cellEditor': 'agRichSelectCellEditor',
    'cellEditorParams': {
      'values': colors,
      'searchType': 'match',
      'allowTyping': True,
      'filterList': True,
      'highlightMatch': True,
      'valueListMaxHeight': 220,
    },
  },
  {
    'headerName': 'Allow Typing (MatchAny)',
    'field': 'color',
    'cellRenderer': 'ColourCellRenderer',
    'cellEditor': 'agRichSelectCellEditor',
    'cellEditorParams': {
      'values': colors,
      'searchType': 'matchAny',
      'allowTyping': True,
      'filterList': True,
      'highlightMatch': True,
      'valueListMaxHeight': 220,
    },
  }
]

app.layout = html.Div(
    [
        dag.AgGrid(
            enableEnterpriseModules=True,
        #    licenseKey =  Your license key here
            columnDefs=columnDefs,
            defaultColDef={"editable": True},
            rowData=df.to_dict('records'),
            columnSize="sizeToFit",
            dashGridOptions={"animateRows": False}
        ),
    ]
)


if __name__ == "__main__":
    app.run(debug=True)


"""
Add the following to the dashAgGridComponentFunctions.js file in the assets folder:

 var dagcomponentfuncs = (window.dashAgGridComponentFunctions =
    window.dashAgGridComponentFunctions || {});

 dagcomponentfuncs.ColourCellRenderer = (props) => {
  
  const styles = {
    verticalAlign: "middle",
    border: "1px solid black",
    margin: 3,
    display: "inline-block",
    width: 20,
    height: 10,
    backgroundColor: props.value.toLowerCase(),
  };
  return React.createElement("div", {}, [
    React.createElement("span", { style: styles }),
    React.createElement("span", {}, props.value),
  ]);
};


"""



dag-docs

2 Likes

Hello @AnnMarieW
I’ve managed to allow typing on a select cell editor, while setting hardcoded values on the python-side, as you did in your example:

'cellEditorParams': {
      'values': colors,

But when I am trying to achieve the same while using a JS function, I can’t manage to make it work:

'cellEditorParams': {
    'headerName': 'Allow Typing (MatchAny)',
    'field': 'my_field',
    'function': 'myCustomJSFunction(params.data.my_custom_data_col)',
    'searchType': 'matchAny',
    'allowTyping': True,
    'filterList': True,
    'highlightMatch': True
}

Is it yet possible to combine typing and generate cell possible values through a JS function?

Thank you
Davy

Hi @davy.datascience

You should be able to use a JS function. but it would probably need to look something like

'cellEditorParams': {
      'values': {"function": "myCustomJSFunction(params)"}

If that doesn’t work could you provide a complete minimal example with some sample data?

Hi @AnnMarieW

Thanks for your fast reply.

I still do not manage to make it work. Here I’ve build a minimal example of dropdown options with JS working without the free text typing:

from dash import Dash, html
import dash_ag_grid as dag
import pandas as pd

app = Dash(__name__)

df = pd.DataFrame(
    {
        "color": ["red", "blue", "yellow"],
        "color_options": [["red", "blue"], ["blue", "brown"], ["yellow", "orange"]]
    }
)
    
columns_def = [
    {"headerName": "ID", "field": "id", "editable": False, "type": "rightAligned"},
    {
        "headerName": "color",
        "field": "color",
        "cellEditor": "agRichSelectCellEditor",
        "cellEditorPopup": True,
        "cellEditorParams": {"function": "getColorOptions(params.data.color_options)"},
        "filter": "agSetColumnFilter"
    }
]

app.layout = html.Div(
    [
        dag.AgGrid(
        	id="activity-table",
        	getRowId="params.data.id",
        	rowData=df.to_dict("records"),
        	columnDefs=columns_def,
        	columnSize="autoSize",
        	columnSizeOptions={"keys": []},
        	defaultColDef={
        	    "editable": True,
        	    "resizable": True,
        	    "sortable": True,
        	    "floatingFilter": True,
        	    "suppressMovable": True,
        	    "menuTabs": ["filterMenuTab", "columnsMenuTab"],
        	},
        	dashGridOptions={
        	    "rowSelection": "multiple",
        	    "singleClickEdit": False,
        	    "enableRangeSelection": True,
        	    "enableFillHandle": True,
        	    "undoRedoCellEditing": True,
        	    "stopEditingWhenCellsLoseFocus": True,
        	    "tooltipShowDelay": 100,
        	},
        	enableEnterpriseModules=True,
        	# licenseKey= Your license key here
        	style={"height": "1000px"},
        ),
    ]
)

But when I try to implement the free text typing it doesn’t work at all:

from dash import Dash, html
import dash_ag_grid as dag
import pandas as pd

app = Dash(__name__)

df = pd.DataFrame(
    {
        "color": ["red", "blue", "yellow"],
        "color_options": [["red", "blue"], ["blue", "brown"], ["yellow", "orange"]]
    }
)

columns_def = [
    {"headerName": "ID", "field": "id", "editable": False, "type": "rightAligned"},
    {
        "headerName": "color",
        "field": "color",
        "cellEditor": "agRichSelectCellEditor",
        "cellEditorPopup": True,
        'cellEditorParams': {
            'values': {"function": "getColorOptions(params.data.color_options)"},
            'searchType': 'matchAny',
            'allowTyping': True,
            'filterList': True,
            'highlightMatch': True,
            'valueListMaxHeight': 220,
        },
        "filter": "agSetColumnFilter"
    }
]

app.layout = html.Div(
    [
        dag.AgGrid(
        	id="activity-table",
        	getRowId="params.data.id",
        	rowData=df.to_dict("records"),
        	columnDefs=columns_def,
        	columnSize="autoSize",
        	columnSizeOptions={"keys": []},
        	defaultColDef={
        	    "editable": True,
        	    "resizable": True,
        	    "sortable": True,
        	    "floatingFilter": True,
        	    "suppressMovable": True,
        	    "menuTabs": ["filterMenuTab", "columnsMenuTab"],
        	},
        	dashGridOptions={
        	    "rowSelection": "multiple",
        	    "singleClickEdit": False,
        	    "enableRangeSelection": True,
        	    "enableFillHandle": True,
        	    "undoRedoCellEditing": True,
        	    "stopEditingWhenCellsLoseFocus": True,
        	    "tooltipShowDelay": 100,
        	},
        	enableEnterpriseModules=True,
        	# licenseKey= Your license key here
        	style={"height": "1000px"},
        ),
    ]
)

Here’s the JS code associated:

var dagfuncs = window.dashAgGridFunctions = window.dashAgGridFunctions || {};

dagfuncs.getColorOptions = function(colorOptions) {
    return {
        values: colorOptions,
    }
}

Thanks in advance

Hi @davy.datascience

Oh, I see - providing a complete example is helpful.

Start with your first example and keep this the same (disregard my earlier answer)

 "cellEditorParams": {"function": "getColorOptions(params.data.color_options)"},

Then change the JS function to:


dagfuncs.getColorOptions = function(colorOptions) {
    return {
        values: colorOptions,
        allowTyping: true,
        filterList: true,
        highlightMatch: true,
    }
}

1 Like

Thank you @AnnMarieW it works like a charm! :smiley: