Hi,
I have used Ag Grid in my app and the filter does not work as intended.
It is not giving me the results for the word I type in the filter and more over the the layout is becoming blank. Any leads regarding this issue is greatly appreciated. Thanks !
Here is the screenshot of the issue:
I have attached the code here:
from dash import Dash, dcc, Input, Output, State, callback, dash_table, html, callback_context
import pandas as pd
import dash_bootstrap_components as dbc
import dash_ag_grid as dag
import json
import base64
df = pd.DataFrame({
'name': ['Google', "Twitter/ Facebook", "Youtube", "LinkedIn"],
'Date': ['2018-08-30 22:52:25', '2021-09-29 13:33:49', '2018-08-30 22:52:25', '2021-09-29 13:33:49'],
'Ticket ID': [1444008, 1724734, 5467809, 9876398],
'Work Order': ['119846184', '122445397','11453284', '12435397'],
'Link(s)': ['[Google](https://www.google.com)', '[Twitter](https://www.twitter.com), [Facebook](https://www.facebook.com)',
'[Youtube](https://www.youtube.com/)','[LinkedIn](https://www.linkedin.com/)'],
})
app = Dash(__name__,external_stylesheets=[dbc.themes.BOOTSTRAP])
header = html.Header([
html.Div([html.H4('Mock App',style={ "color" : "white"})],style={"display": "inline-block", "marginLeft" : "2.5%"}),
html.Div([
dbc.Button( "Tab1", id = 'Tab1-btn',n_clicks_timestamp=0, size = 'sm',
style={"color" : "white","border": "None",'hover': {"color": "#222B62", 'background-color': 'white'}}
),
],style={"display": "inline-block","marginLeft" : "70%", "marginTop":"1.18%"}),
html.Div([
dbc.Button( "Tab2", id = 'Tab2-btn',n_clicks_timestamp=0, size = 'sm',
style={"color" : "white","border": "None"}
),
],style={"display": "inline-block", "marginTop":"1.18%"})
],
style={"background-color": "#222B62","height": "8vh","width": "100%",
"marginLeft" : "0%","marginRight" : "0%","marginTop" : "0%",
"marginBottom": "2%","alignItems": "center","borderColor": "#222B62",})
text_input = html.Div(
[ html.H6("Search:", style={"marginLeft" : "1.5%", "font-weight": "bold","display": "inline-block", "color": "#222B62"}),
dbc.Input(id="input", placeholder="Type something...", type="text",style={"marginLeft" : "1.5%", "width" : "50%", "display": "inline-block"} ),
html.Br(),
html.Br(),
html.Br(),
html.P(id="output",style={"marginLeft" : "1.5%", "font-style": "italic"}),
])
table = dag.AgGrid(
id="cell-selection-simple-click-callback",
rowData=df.to_dict("records"),
columnDefs=[{"field": i,"cellRenderer": "markdown", "linkTarget": "_blank"} if i == 'Link(s)' else {"field": i} for i in df.columns],
# defaultColDef={"filter": True},
defaultColDef={"sortable": True, "filter": True, "floatingFilter": True},
columnSize="sizeToFit",
getRowId="params.data.State",
dashGridOptions={"animateRows": False, "domLayout" : 'autoHeight'}
)
modal = html.Div(
[
dbc.Modal(
[
dbc.ModalHeader(dbc.ModalTitle("Header")),
dbc.ModalBody("This is the content of the modal",id= "modal_content"),
dbc.ModalFooter(
dbc.Button(
"Close", id="close",color="danger", className="ms-auto", n_clicks=0
)
),
],
id="modal",
is_open=False,
),
]
)
displaytext = html.H3("In progress..", style={"marginLeft" : "45%", "font-weight": "bold","display": "inline-block", "color": "#222B62"})
######################### app layout #####################################################
app.layout = html.Div([
header,
#Tab1
html.Div([html.Br(), text_input,html.Br(),table,html.Br(), modal], id = 'Tab1-div',style={}),
#Tab2
html.Div([html.Br(), html.Br(), displaytext], id = 'Tab2-div',style={'display':'none'}),
])
@app.callback(Output("output", "children"),
[Input("input", "value")])
def output_text(value):
print(value)
if value != None:
if len(value) != 0: display_value = "Showing results for '" + value + "'"
else: display_value = ""
else: display_value = ""
return display_value
@app.callback(
[
Output('Tab1-div','style'),
Output('Tab2-div','style'),
Output('Tab1-btn','style'),
Output('Tab2-btn','style'),],
[Input('Tab1-btn', 'n_clicks_timestamp' ),
Input('Tab2-btn', 'n_clicks_timestamp' )]
)
def on_click(one,two):
selected = {"color": "#222B62", 'background-color': 'white',"border": "None", 'marginTop':"2%"}
not_selected = {"color" : "white",'background-color':"#222B62",'height' : '31px',"border": "None",'marginTop':"2%"}
if one>two : return ({'display':'inline'},{'display':'none'}, selected,not_selected)
elif two>one: return ({'display':'none'},{'display':'inline'},not_selected,selected )
else: return ({'display':'inline'},{'display':'none'},selected, not_selected)
@app.callback(
[Output("modal", "is_open"),
Output("modal_content","children"),],
[Input("cell-selection-simple-click-callback", "cellClicked"),
Input("close", "n_clicks")],
[State("modal", "is_open")],
)
def toggle_modal(n1, n2, is_open):
if n1 or n2:
return (not is_open, f"Clicked on cell:\n{json.dumps(n1, indent=2)}")
return (is_open, f"Clicked on cell:\n{json.dumps(n1, indent=2)}")
if __name__ == "__main__":
app.run(debug=True, port = 8052)