Custom filter of combined columns on Filter side panel tool

Dash Python
1

Hi team,
Using Dash AG Grid enterprise. I’d like to create a filter which is the AND combination of a few columns. I’d like to display this filter on Filter tool panel but not on the Fields tool panel. Is it possible?

Thanks,

2

Hello @231530353,

You want to make preset filters and not allow them to be manipulated via the interface?

3

yes, and basically the only way for one to interact with this filter would be via the side panel filters.

4

Sure, here is an example:

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

import os

app = Dash(__name__)

df = pd.read_csv(
    "https://raw.githubusercontent.com/plotly/datasets/master/ag-grid/olympic-winners.csv"
)

columnDefs = [
    {
        "headerName": "Athlete",
        "children": [{"field": i} for i in ["athlete", "age", "country"]]
    },
    {
        "headerName": "Competition",
        "children": [{"field": "year"}, {"field": "date"}],
    },
    {"field": "sport"},
    {
        "headerName": "Medals",
        "children": [{"field": i} for i in ["gold", "silver", "bronze", "total"]]
    },
]

defaultColDef = {
    "filter": True,
    "enableRowGroup": True,
    "enableValue": True,
    "enablePivot": True,
    "menuTabs": ['generalMenuTab', 'columnsMenuTab']
}

sideBar = {
    "toolPanels": [
        {
            "id": "columns",
            "labelDefault": "Columns",
            "labelKey": "columns",
            "iconKey": "columns",
            "toolPanel": "agColumnsToolPanel",
        },
        {
            "id": "filters",
            "labelDefault": "Filters",
            "labelKey": "filters",
            "iconKey": "filter",
            "toolPanel": "agFiltersToolPanel",
        },
        {
            "id": "filters 2",
            "labelKey": "filters",
            "labelDefault": "More Filters",
            "iconKey": "menu",
            "toolPanel": "agFiltersToolPanel",
        },
    ],
    "position": "left",
    "defaultToolPanel": "filters",
}

app.layout = html.Div(
    [
        dcc.Markdown(
            """
        Demonstration of how to enable sidebar feature in a Dash AG Grid.    

        If the user sets `sideBar=True`, then the side bar is displayed with default configuration.
        The user can also set `sideBar` to `columns` or `filters` to display side bar with just one of Columns or Filters tool panels.
        """
        ),
        dag.AgGrid(
            id="sidebar-basic",
            columnDefs=columnDefs,
            rowData=df.to_dict("records"),
            dashGridOptions={"rowSelection": "multiple", "animateRows": False, "sideBar": True},
            defaultColDef=defaultColDef,
            enableEnterpriseModules=True,
            licenseKey=os.getenv('AGGRID_ENTERPRISE'),
        ),
        dcc.Markdown(
            """
            A dictionary can be passed to allow detailed configuration of the side bar. Use this to configure the provided tool panels (e.g. pass parameters to the columns or filters panel) or to include custom tool panels.
            """
        ),

        dag.AgGrid(
            columnDefs=columnDefs,
            rowData=df.to_dict("records"),
            dashGridOptions={"rowSelection": "multiple", "animateRows": False, "sideBar": sideBar},
            defaultColDef=defaultColDef,
            enableEnterpriseModules=True,
            licenseKey=os.getenv('AGGRID_ENTERPRISE'),
        ),
    ]
)

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

Basically, you just pass menuTabs to disable the filter interface. :slight_smile:

1 Like
5

Thanks a lot @jinnyzor

Is there any way that we have a field only shown up on Filters side panel tool and suppressed from Fields side panel tool?

Thanks,

6

@231530353,

Can you take a screenshot and mark up what you want, this is a little difficult to understand.

7

sure,

Currently we have the below filter for any Portfolio on a dashboard, lets call it filter 1:

image
image1014×178 9.66 KB

my client asked me to develop a filter called Cross Portfolios, which is basically AND operation among all the portfolios’ filter 1.

I am looking on different possible solutions for this request, in terms of UX as well as AG Grid Dash development.

8

I’m still confused here.

The code I provided should have removed this filter from the field’s individual ability. If you want, you can always provide a custom filter as well, but not sure how that’d work since you want the regular filter on the side bar.

But, I think this could be possible if you were to pass a function to the filter itself…

1 Like