Add Icon to Unlock All Rows for Editing

Question

Hi everyone. We are building a grid with data records in it. What we want to do is add a button above the grid, that when clicked, will unlock all the rows for editing and when clicked again will lock the rows. In other words, if a user clicks the button, all the fields will turn into text fields and if clicked again the fields would go back to read-only. 
 
 Any suggestions for how to go about this?

vimalkumars · Accepted Answer

jaredd0001, 
 Have a local variable gridDataReadOnly. Use this in all the Gride Row Fields - read-only Parameter and set the value for this local variable using the button click

vimalkumars · Answer

If you are looking for a sample code 
 a!localVariables(
 local!gridDataReadOnly: true(),
 {
 a!buttonArrayLayout(
 buttons: {
 a!buttonWidget(
 label: "Save Edit",
 saveInto: {
 a!save(local!gridDataReadOnly, true)
 },
 style: "NORMAL",
 showWhen: local!gridDataReadOnly=false()
 ),

 a!buttonWidget(
 label: "Edit",
 saveInto: {
 a!save(local!gridDataReadOnly, false)
 },
 style: "NORMAL",
 showWhen: local!gridDataReadOnly<>false()
 )
 },
 align: "START"
 ),
 a!gridLayout(
 labelPosition: "ABOVE",
 headerCells: {
 a!gridLayoutHeaderCell(label: "Header Cell"),
 a!gridLayoutHeaderCell(
 label: "Header Cell"
 )
 },
 columnConfigs: {},
 rows: {
 a!gridRowLayout(
 contents: {
 a!textField(
 label: "Text",
 labelPosition: "ABOVE",
 value: "Text Field",
 saveInto: {},
 refreshAfter: "UNFOCUS",
 readOnly: local!gridDataReadOnly,
 validations: {}
 ),
 a!dropdownField(
 label: "Dropdown",
 labelPosition: "ABOVE",
 placeholder: "--- Select a Value ---",
 choiceLabels: {"Option 1", "Option 2", "Option 3", "Option 4",
 "Option 5", "Option 6", "Option 7", "Option 8",
 "Option 9", "Option 10", "Option 11", "Option 12"},
 choiceValues: {1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12},
 saveInto: {},
 searchDisplay: "AUTO",
 disabled: local!gridDataReadOnly,
 validations: {}
 )
 }
 )
 },
 selectionSaveInto: {},
 validations: {},
 shadeAlternateRows: true
 )
})

Add Icon to Unlock All Rows for Editing

Top Replies