[Python] streamlit-aggrid multiselect : preview values were `undefined(undefined)`

I'm using streamlit-aggrid to display table. In the C column i use multiselect feature, select items and results are ok, but during selecting ,the preview values were undefined(undefined).

I prefer to display the preview value like the result exink;Purple.



I use followin python code in streamlit framwork.

Select Items are dictionary value. When select from dropdownbox ,i want to display name&code. But when selected,cell values are names with ";" concated.

import streamlit as st
import pandas as pd


from st_aggrid import AgGrid, GridOptionsBuilder, JsCode

df = pd.DataFrame(
"",
index=range(10),
columns=list("c"),
)

gb = GridOptionsBuilder.from_dataframe(df)
gb.configure_default_column(editable=True)


dic= [
{ "name": 'Pink', "code": '#FFC0CB' },
{ "name": 'Purple', "code": '#A020F0' },
{ "name": 'Blue', "code": '#0000FF' },
{ "name": 'Green', "code": '#008000' },
]

st.text(dic)
gb.configure_column(
"c",
cellEditor="agRichSelectCellEditor",
valueFormatter=JsCode(
"""function(params) { if (Array.isArray(params.value)) {
let stringjoin="";
params.value.forEach((el) => {if (el!=null && el !== "") { stringjoin +=";"+ el.name}});
return stringjoin.slice(1)
}

return params.value.name; }"""
),
valueParser=JsCode("""function(params) { console.log(params);

const { newValue } = params.newValue;

if (newValue == null || newValue === "") {
return null;
}

if (Array.isArray(newValue)) {
let stringjoin="";
newValue.forEach((el) => {stringjoin +=";"+ el.name});
return stringjoin.slice(1)
}

return newValue;


}"""),
cellEditorParams={
"values": dic,
"multiSelect": "true",
"suppressMultiSelectPillRenderer": "true",
"formatValue": JsCode("""function(v) {if (v !== null || v !== "") {
return `${v.name} (${v.code})`
}
} """),
"parseValue": JsCode("""function(v) {
let stringjoin="";
console.log(v);
forEach((el) => {stringjoin +=";"+ el.name});
return stringjoin.slice(1) }"""),
"allowTyping": "true",
"filterList": "true",
"valueListMaxHeight": 220,
"searchType": "matchAny",
},
)



gb.configure_grid_options(enableRangeSelection=True)


gb.configure_grid_options(enableRangeSelection=True)

go = gb.build()



response = AgGrid(
df,
gridOptions=go,
enable_enterprise_modules=True,
key="grid1",
allow_unsafe_jscode=True,
)

Continue reading...