Editable grid

Question

i have an editable grid and in single row i have checkbox and textfields, i need to make textfield readonly false based on selected option in checkbox in that particular row. Please let me know if any workaround available for this

JayaPrakash Ravipati · Answer

HI shivas3219 
 Please check this code. It might help you 
 a!localVariables(
 local!options:{"Yes","No"},
 local!data:{
 a!map(check:"Yes",text:"sample text")
 },
 a!gridLayout(
 headerCells: {
 a!gridLayoutHeaderCell(label:"Checkboxes"),
 a!gridLayoutHeaderCell(label:"Textfield"),
 },
 columnConfigs: {
 a!gridLayoutColumnConfig(width: "DISTRIBUTE"),
 a!gridLayoutColumnConfig(width: "DISTRIBUTE"),
 },
 rows: a!forEach(
 items: local!data,
 expression: a!gridRowLayout(
 contents: {
 a!checkboxField(
 choiceLabels: local!options,
 choiceValues: local!options,
 value: fv!item.check,
 saveInto: fv!item.check
 ),
 a!textField(
 value: fv!item.text,
 saveInto: fv!item.text,
 readOnly: if(
 fv!item.check="Yes",
 true(),
 false()
 )
 )
 }
 )
 ),
 addRowLink: a!dynamicLink(
 label:"Add new row",
 saveInto: a!save(local!data,append(local!data,a!map(check:"",text:"")))
 )
 )
)

Nilanshu · Answer

Please try this code and let me know if you need anything else. 
 
 a!localVariables(
 local!data: { a!map(checkbox: null, text: null) },
 {
 a!gridLayout(
 label: "Editable Grid",
 labelPosition: "ABOVE",
 headerCells: {
 a!gridLayoutHeaderCell(label: "Checkbox"),
 a!gridLayoutHeaderCell(label: "Text")
 },
 columnConfigs: {},
 rows: {
 a!forEach(
 items: local!data,
 expression: {
 a!gridRowLayout(
 contents: {
 a!checkboxField(
 choiceLabels: "Make text editable",
 choiceValues: true,
 value: index(fv!item, "checkbox", null),
 saveInto: fv!item.checkbox
 ),
 a!textField(
 value: index(fv!item, "text", null),
 saveInto: fv!item.text,
 readOnly: not(or(index(fv!item, "checkbox", null)))
 )
 }
 )
 }
 )
 },
 addRowLink: a!dynamicLink(
 label: "Add new row",
 saveInto: a!save(
 local!data,
 append(
 local!data,
 a!map(checkbox: null, text: null)
 )
 )
 ),
 selectionSaveInto: {},
 validations: {},
 shadeAlternateRows: true
 )
 }
)

Editable grid

Top Replies