# Dynamic buttons

**URL:** <https://community.plotly.com/t/dynamic-buttons/54500>\
**Category:** Dash Python\
**Created:** [July 6, 2021, 3:27pm UTC](https://community.plotly.com/t/dynamic-buttons/54500 "2021-07-06T15:27:32Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![saeed](https://avatars.discourse-cdn.com/v4/letter/s/e8c25b/32.png) [@saeed](https://community.plotly.com/u/saeed)\
**Post date:** [July 6, 2021, 3:27pm UTC](https://community.plotly.com/t/dynamic-buttons/54500/1 "2021-07-06T15:27:32Z")

</div>

Hello,  
I hope every one is doing great.

I have problem that I stack with it for a week. I hope if can any one help me and thank very much in advance

first  
I want to display cards based on columns. something like Kanban dashboard  
I create dynamically button for each card that coming from list unknown number.  
\*\* the problem I could not know which button has been clicked  
I used ALL, it got me all buttons id therefore I could not know which button has been clicked I think MATCH dose not apply to my problem

there is the code and i hope someone has solution

from datetime import datetime

from os import terminal\_size

from typing import Match

import dash # (version 1.0.0)

import dash\_bootstrap\_components as dbc

import dash\_core\_components as dcc

import dash\_html\_components as html

import pandas as pd

import plotly.graph\_objs as go

import plotly.offline as py # (version 4.4.1)

from app import app

from dash.dependencies import Input, Output, State, MATCH, ALL, ALLSMALLER

from dash\_core\_components.Store import Store

from Model import modelV2 as model

from Model.main import Base, engine, session

from sqlalchemy.sql.expression import and\_, or\_

Base.metadata.create\_all(bind=engine, checkfirst=True)

project = session.query(model.Project).all()

dropDownPr = dcc.Dropdown(

```
options=[{'label': b.name, 'value': b.id} for b in project],

value=[b.id for b in project],

id='dropDownPr',

placeholder="Select a Items")

```

layout = html.Div([

```
dropDownPr,

# modal,

html.Hr(),

html.Div(id='groupedDash',

         style={

    'display': 'flex',

    'flex-direction': 'row',

    'flex-wrap': 'nowrap',

    'justify-content': 'space-evenly'}),

html.Hr(),

html.Div( id='disp_button', children=[]),

html.Button('Add', id='btne'),

html.Br(),

dcc.Store(id='localk', storage_type='local'), 

html.Div(id='localkOut'), 

```

])

@app.callback(

```
[Output('groupedDash', 'children'),

 Output('localk', 'data'),

 Output('localkOut', 'children'),

# Output({"index": MATCH, "type": "value"}, "value"),

 ],

[

Input('dropDownPr', 'value'),

# Input({"index": MATCH, "type": "done"}, "id"),

# Input('groupedDash', 'n_clicks'),

])

```

def display\_dropdowns(project):

```
print('nc')

# print(nc)

statusPrr = session.query(model.Status).filter_by(project_id=project)

headersList = []

listList = []

n_clicks = 0

query = ''' SELECT Task.*,Status.name AS status_name FROM Task INNER JOIN Status ON Task.status_id = Status.id'''

tasks = pd.read_sql_query(query, engine)

for oo in statusPrr:

    header = html.Div(

        children=[

            html.Div(oo.name, style={

                'text-align': 'center'}),

        ], style={

            'justify-content': 'space-evenly'})

    headersList.append(header)

    cominingData = oo.name

    rslt_df = tasks[(tasks['project_id'] == project) &

                    (tasks['status_name'] == cominingData)]

    if len(rslt_df.index) == 0:

        card_content = dbc.Col(

            children=[

                html.Div(html.H4('no data'), style={

                    'text-align': 'center'})

            ], style={

                'justify-content': 'space-evenly'})

    else:

        subCard = []

        # rfrf=row['id']

        for i, row in rslt_df.iterrows():

            n_clicks=0

            card_content_sub = dbc.Row([

                dbc.Row(

                    dbc.Card(

                        [

                            dbc.CardBody(

                                [

                                    html.H4(row['name'],

                                            className="card-title"),

                                    html.P(row['desc'],

                                           className="card-text",

                                           ),

                                    html.Button(

                                        "Edite", id=row['id']),

                                        # "Edite", id={"index": row['id'], "type": "done"}),

        html.Div(row['id'],id=row['id'])

                                    

                                ]

                            ),

                        ],

                    ),

                    style={

                        'display': 'flex',

                        'flex-direction': 'row',

                        'box-shadow': '0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19)',

                        'margin': '7px',

                        'flex-wrap': 'nowrap',

                        'justify-content': 'space-evenly'}

                )])

            subCard.append(card_content_sub)

        card_content = dbc.Col([

            dbc.Row(subCard,

                    style={

                        'display': 'flex',

                        'flex-direction': 'column',

                        'margin': '0px',

                        'justify-content': 'space-evenly'}

                    )])

    listList.append(card_content)

cards = html.Div(

    [

        dbc.Row(headersList,

                style={

                    'display': 'flex',

                    'flex-direction': 'row',

                    'flex-wrap': 'nowrap',

                    'justify-content': 'space-evenly'}

                ),

        html.Hr(),

        html.Hr(),

        dbc.Row(listList,

                style={

                    'display': 'flex',

                    'flex-direction': 'row',

                    'flex-wrap': 'nowrap',

                    'justify-content': 'space-evenly'}

                ),

        html.Div('hereeeeeeeeeeeeeeeeeeeeeeeee', id='dynamicOutputOt')

    ])

js = rslt_df.to_json(orient = 'columns')

return [cards], js, js
```

---

<div class="post-metadata">

**Author:** ![aboyher](https://avatars.discourse-cdn.com/v4/letter/a/ebca7d/32.png) [@aboyher](https://community.plotly.com/u/aboyher)\
**Post date:** [July 8, 2021, 11:36pm UTC](https://community.plotly.com/t/dynamic-buttons/54500/2 "2021-07-08T23:36:09Z")

</div>

I’m on mobile right now so my answer is a bit limited, but you can still get the trigger ID when using ALL. I believe it’s a stringified dict, but you can use json.load to get the id a little easier.

It’s all right here: [Pattern-Matching Callbacks | Dash for Python Documentation | Plotly](https://dash.plotly.com/pattern-matching-callbacks).

---

<div class="post-metadata">

**Author:** ![saeed](https://avatars.discourse-cdn.com/v4/letter/s/e8c25b/32.png) [@saeed](https://community.plotly.com/u/saeed)\
**Post date:** [July 9, 2021, 11:45am UTC](https://community.plotly.com/t/dynamic-buttons/54500/3 "2021-07-09T11:45:23Z")

</div>

🙏 thank you very much​:tulip:  
Pattern-Matching Callbacks with ALL  
Call this “dash.callback\_context.triggered” and it got me the triggered id button