CODEWITHSUNDEEP
javascriptpythonbokehbokehjs
Gingerhaze
Gingerhaze

Reputation: 676

Bokeh CustomJS callback to change data table column visibility to True

I have a multi choice widget and when the user selects an option in the widget I want the DataTable to update and make the column selected visible. So essentially when the TableColumn.field= multi_choice.value I want to change TableColumn.visible= True

filtered_table_data=df[["Li","Be"]]

filtered_table_source= ColumnDataSource(data=filtered_table_data)

filtered_table_cols=[]

filtered_table_cols.append(TableColumn(field='Li', title='Li', width=750, visible=False))
filtered_table_cols.append(TableColumn(field='Be', title='Be', width=750,visible=False))
 
filtered_table=DataTable(source=filtered_table_source, columns=filtered_table_cols)

multi_choice = MultiChoice(value=[], options=df.columns[2:-1].tolist(), title='Select elements:')

callback2 = CustomJS(args=dict(multi_choice=multi_choice, filtered_table=filtered_table), code="""
    for (var i=0; i<filtered_table.columns.length; i++)
    {
     for (var j=0; j<multi_choice.value.length;j++)
     {
             if (filtered_table.columns[i].field==multi_choice.value[j])
             {
                 filtered_table.columns[i].visible=True;
             }
     }
    }
    filtered_table.change.emit()                
""")

multi_choice.js_on_change("value",callback2)

When I try to run the code above nothing happens when I select options, the data table remains empty

Upvotes: 0

Views: 113

Answers (1)

Dmytro Dubyna
Dmytro Dubyna

Reputation: 1

JS boolean type is case-sensitive

filtered_table.columns[i].visible=True;

Besides this it looks workable

Upvotes: 0

Related Questions