Dear friends,
I do have a question, hoping you could help me. I assume my error lies with the JsCode part, however I really couldn’t manage to find my mistake
Situation: I have a frame where I check for requirements and if requirements are violated the cell color will change. This works perfectly fine. Now I am implementing a “add row” and “delete row” statement in order to give the user the chance to add information in case they might forget something. However, if I add the command, editing my rows will not work, unless I comment out my requirements checking
gb.configure_column("Name", cellStyle=cellsytle_jscode_Name,editable=True)
Below you can find my code which perfectly works.
So question: What should I do, if I want to keep my “requirements checking statements for Name” and still possible to add and delete rows?
Any kind of support is more than appreciated
import streamlit as st
import pandas as pd
from st_aggrid import GridOptionsBuilder, AgGrid, JsCode
df=pd.DataFrame({"Name":["Albert","Max","John"],"Family Name":["Einstein","Miller","Rambo"]})
gb = GridOptionsBuilder.from_dataframe(df)
string_to_add_row = "\n\n function(e) { \n \
let api = e.api; \n \
let rowIndex = e.rowIndex + 1; \n \
api.applyTransaction({addIndex: rowIndex, add: [{}]}); \n \
}; \n \n"
string_to_delete = "\n\n function(e) { \n \
let api = e.api; \n \
let sel = api.getSelectedRows(); \n \
api.applyTransaction({remove: sel}); \n \
}; \n \n"
cell_button_add = JsCode('''
class BtnAddCellRenderer {
init(params) {
this.params = params;
this.eGui = document.createElement('div');
this.eGui.innerHTML = `
<span>
<style>
.btn_add {
background-color: limegreen;
border: none;
color: white;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 10px;
font-weight: bold;
height: 2.5em;
width: 8em;
cursor: pointer;
}
.btn_add :hover {
background-color: #05d588;
}
</style>
<button id='click-button'
class="btn_add"
>⊕ Add</button>
</span>
`;
}
getGui() {
return this.eGui;
}
};
''')
cell_button_delete = JsCode('''
class BtnCellRenderer {
init(params) {
console.log(params.api.getSelectedRows());
this.params = params;
this.eGui = document.createElement('div');
this.eGui.innerHTML = `
<span>
<style>
.btn {
background-color: #F94721;
border: none;
color: white;
font-size: 10px;
font-weight: bold;
height: 2.5em;
width: 8em;
cursor: pointer;
}
.btn:hover {
background-color: #FB6747;
}
</style>
<button id='click-button'
class="btn"
>🗑 Delete</button>
</span>
`;
}
getGui() {
return this.eGui;
}
};
''')
cellsytle_jscode_Name = JsCode("""
function(params){
if (params.value.includes('Violation of Rule')) {
return {
'color': 'red',
'backgroundColor': 'white',
}
}
if (params.value.includes('Missing')) {
return {
'color': 'red',
'backgroundColor': 'white',
}
}
if (params.value.length>6) {
return {
'color': 'red',
'backgroundColor': 'white',
}
}
if (params.value.length<=6) {
return {
'color': 'red',
'backgroundColor': 'white',
}
}
if (params.value=="") {
return {
'color': 'black',
'backgroundColor': 'yellow',
}
}
}
""")
gb.configure_column('', headerTooltip='Click on Button to add new row', editable=False, filter=False,
onCellClicked=JsCode(string_to_add_row), cellRenderer=cell_button_add,
autoHeight=True, wrapText=True, lockPosition='left')
gb.configure_column('Delete', headerTooltip='Click on Button to remove row',
editable=False, filter=False, onCellClicked=JsCode(string_to_delete),
cellRenderer=cell_button_delete,
autoHeight=True, suppressMovable='true')
gb.configure_column("Name", cellStyle=cellsytle_jscode_Name,editable=True)
gb.configure_default_column(editable=True)
gb.configure_selection(use_checkbox=True,selection_mode="multiple")
grid_options = gb.build()
grid_return=AgGrid(df, gridOptions=grid_options,allow_unsafe_jscode=True,theme="streamlit")
df=grid_return["data"]
