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

**URL:** <https://community.plotly.com/t/ag-grid-custom-function-value-from-leaf-to-group-row/74054>\
**Category:** Dash Python\
**Created:** [April 1, 2023, 9:06pm UTC](https://community.plotly.com/t/ag-grid-custom-function-value-from-leaf-to-group-row/74054 "2023-04-01T21:06:40Z")\
**Posts on this page:** 2\
**Page:** 1

<div class="post-metadata">

**Author:** ![davzup89](https://avatars.discourse-cdn.com/v4/letter/d/439d5e/32.png) [@davzup89](https://community.plotly.com/u/davzup89)\
**Post date:** [April 1, 2023, 9:06pm UTC](https://community.plotly.com/t/ag-grid-custom-function-value-from-leaf-to-group-row/74054/1 "2023-04-01T21:06:40Z")

</div>

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](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:

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

```

and then groupby this column in dag:

```auto
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:

```auto
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.

---

<div class="post-metadata">

**Author:** ![davzup89](https://avatars.discourse-cdn.com/v4/letter/d/439d5e/32.png) [@davzup89](https://community.plotly.com/u/davzup89)\
**Post date:** [April 1, 2023, 9:17pm UTC](https://community.plotly.com/t/ag-grid-custom-function-value-from-leaf-to-group-row/74054/2 "2023-04-01T21:17:29Z")

</div>

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)"}},

```