Hi All,
I’m trying to differentiate my pinned bottom row.
I found that cellRendererSelector must be put to defaultColDef.
but frankly speaking no idea how to use it.
I just want pinned row to to surpass any styling of other rows with bigger font and blue color.
'cellRendererSelector': {"function": "rowPinningBottom(params)"}
I’d be gratefull to pointing me where to find, in docs, rules for using js in Dash…
and Marry Christmass to everyone 
Hi @acidkans
You can find an example in the docs here:
I have questions regarding styling and valueGetter of pinned row.
get_row_style = {
"styleConditions":[
{
"condition": "!(params.data.invoice_number == null) ",
"style": {"backgroundColor": "#2aa198"},
"condition": "(params.node.rowPinned == 'bottom') ",
"style": {"backgroundColor": "#cb4b16", 'color': 'blue', 'fontWeight': 'bold','font-size':'24px'},
}],
}
{'headerName': 'INVOICE DESCRIPTION',"wraptext":True,"filterParams":{"excelMode": "windows"},"autoHeight":True,
'valueGetter':{"function": "'Prace instalacyjne w tygodniu '+params.data.week +' na stacji '+ params.data.site +"
"', zgodnie z zamówieniem '+params.data.po_number + ' / Installation Arbeiten am '"
" + params.data.site + ', gemacht in KW '+ params.data.week + '; gemaß der Bestellung '"
"+params.data.po_number + '; akzeptiert am ' + params.data.acceptance_date +"
"' von ' + params.data.bauleiter;"}},
You need to test for the node to be pinned to the bottom.
Here, take this example:
import dash_ag_grid as dag
from dash import Dash, html, Input, Output, Patch, callback
import plotly.express as px
app = Dash(__name__)
df = px.data.gapminder()
columnDefs = [
{"field": "country", "checkboxSelection": True},
{
"field": "lifeExp",
"type": "rightAligned",
# "valueFormatter": {"function": "d3.format('.1f')(params.value)"},
"valueGetter": {"function": "params.node.rowPinned == 'bottom' ? 'bottom' : null"}
},
{
"field": "pop",
"type": "rightAligned",
# "valueFormatter": {"function": "d3.format(',.0f')(params.value)"},
},
{
"field": "gdpPercap",
"type": "rightAligned",
# "valueFormatter": {"function": "d3.format('$,.2f')(params.value)"},
},
]
app.layout = html.Div(
[
dag.AgGrid(
id="row-pinning-top",
rowData=df.to_dict("records"),
columnDefs=columnDefs,
defaultColDef={"editable": True, "sortable": True, "filter": True, "resizable": True},
columnSize="sizeToFit",
dashGridOptions={"rowSelection": "multiple"},
),
],
)
@callback(
Output("row-pinning-top", "dashGridOptions"),
Input("row-pinning-top", "selectedRows"),
)
def row_pinning_top(selected_rows):
grid_option_patch = Patch()
grid_option_patch["pinnedBottomRowData"] = selected_rows
return grid_option_patch
if __name__ == "__main__":
app.run(debug=True, port=8000)
sorry for kindergarten question regarding js syntax
'valueGetter':{"function": "params.node.rowPinned == 'bottom' ? *(value if condition False)* : *(value if condition TRUE)*"}}
below aplication just cut off value getter for whole column
'valueGetter':{"function": "params.node.rowPinned == 'bottom' ?
('Prace instalacyjne w tygodniu '+params.data.week +' na stacji '+ params.data.site +"
"', zgodnie z zamówieniem '+params.data.po_number + ' / Installation Arbeiten am '"
" + params.data.site + ', gemacht in KW '+ params.data.week + '; gemaß der Bestellung '"
"+params.data.po_number + '; akzeptiert am ' + params.data.acceptance_date +"
"' von ' + params.data.bauleiter;) : null"}},
You need to do the inverse:
'valueGetter':{"function": "params.node.rowPinned != 'bottom' ?
('Prace instalacyjne w tygodniu '+params.data.week +' na stacji '+ params.data.site +"
"', zgodnie z zamówieniem '+params.data.po_number + ' / Installation Arbeiten am '"
" + params.data.site + ', gemacht in KW '+ params.data.week + '; gemaß der Bestellung '"
"+params.data.po_number + '; akzeptiert am ' + params.data.acceptance_date +"
"' von ' + params.data.bauleiter;) : null"}},
And the syntax of the above is:
evaluates if statement ? return if true : return if false
Hi jinnyzor,
how would I check for pinning row in case of row styling.
I use row styling and cell styling.
and these styling overlap on pinned row, it looks awfull, how could I add same function
“function”: "params.node.rowPinned == ‘bottom’ to use different styling for pinned row.
for rows I use:
get_row_style = {
"styleConditions":[
{
"condition": "!(params.data.invoice_number == null) ",
"style": {"backgroundColor": "#2aa198"},
"condition": "(params.node.rowPinned == 'bottom') ",
"style": {"backgroundColor": "#cb4b16", 'color': 'blue', 'fontWeight': 'bold','font-size':'24px'},
}],
}
for columns I use cellStyle:
'cellStyle': {'styleConditions':
[{
'condition': '(params.value == null)',
'style': {"backgroundColor": "#fd7e14"},
Instead of cellStyle, you should use cellClassRules, as these will refresh when a row is updated.
Then just add an additional css sheet with your styles.
If you want to go this route, then you should add an event listener to the pinnedRowDataChanged, like this:
app.clientside_callback(
"""function (id) {dash_ag_grid.getApiAsync(id).then((grid) => {grid.addEventListener('pinnedRowDataChanged', () => grid.refreshCells())})
return dash_clientside.no_update
}""",
Output('row-pinning-top', 'id'), Input('row-pinning-top','id')
)