Ag-grid custom function: value from leaf to group row

Dash Python
1

Hi!

I am using a row grouping with aggregation (average) in my ag-grid enterprise. I group by 3 columns but due to functionality of AG this 3 columns stay empty in group (superior) row and are only filled in leaf (subordinate) rows even though the values in all of the rows are the same. I would like to keep the values in leaf rows but also show them in group row.
The inverse (showing group value in leaf rows) is possible with showOpenedGroup (https://www.ag-grid.com/javascript-data-grid/grouping-multiple-group-columns/#showing-open-groups).

Use case:

I create a new grouped column in my dataframe:

paralells_df['Col1_Col2_Col3'] = paralells_df['Col1'] + '_' + paralells_df['Col2'] + '_' + paralells_df['Col3'].astype(str)

and then groupby this column in dag:

paralells_table = dag.AgGrid(
    id="paralells_data_table",
    className="ag-theme-alpine",
    columnDefs=[],
    rowData=[],
    columnSize="sizeToFit",
    defaultColDef=defaultColDef,
    enableEnterpriseModules=True, 
    dashGridOptions={
                        "groupDisplayType": "singleColumn",
                        "autoGroupColumnDef": {
                                "headerName": "Averages",
                                "minWidth": 180,}
                                }
)

parralelCDefs = [
    {"headerName": "Col1", "field": "Col1", "valueGetter": {"function": "dagfuncs.Col1ValueGetter(params)"}},
    {"headerName": "Col2", "field": "Col2", "valueGetter": {"function": "dagfuncs.Col2ValueGetter(params)"}},
    {"headerName": "Col3", "field": "Col3", "valueGetter": {"function": "dagfuncs.Col3ValueGetter(params)"}},
    {
        "headerName": "Col1_Col2_Col3",
        "field": "Col1_Col2_Col3",
        "rowGroup": True,
        "hide": True,
    },
    {"headerName": "Paralel", "field": "Paralel"},
]

I had no success with my custom valueGetter function:

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

dagfuncs.Col1ValueGetter = function(params) {
  if (params.node && params.node.group) {
    let firstChild = params.node.childrenAfterGroup[0];
    return firstChild.data.Col1;
  } else {
    return params.data.Col1;
  }
};

dagfuncs.Col2ValueGetter = function(params) {
  if (params.node && params.node.group) {
    let firstChild = params.node.childrenAfterGroup[0];
    return firstChild.data.Col2;
  } else {
    return params.data.Col2;
  }
};

dagfuncs.Col3ValueGetter = function(params) {
  if (params.node && params.node.group) {
    let firstChild = params.node.childrenAfterGroup[0];
    return firstChild.data.Col3;
  } else {
    return params.data.Col3;
  }
};

Any suggestion how to get this right are appreciated.

2

The function is actually working, just my columndefs were incorrectly formatted.

This works:

{"headerName": "Col1", "field": "Col1", "valueGetter": {"function": "Col1ValueGetter(params)"}},
{"headerName": "Col2", "field": "Col2", "valueGetter": {"function": "Col2ValueGetter(params)"}},
{"headerName": "Col3", "field": "Col3", "valueGetter": {"function": "Col3ValueGetter(params)"}},
2 Likes