EGL Development User Group - Group home

Directly Editing Cells in a DataGrid

  

In order to make tables of data more interactive, it's common rich UI practice to allow the user to directly edit data in a cell.  In RBD, you can embed an editable widget in a DataGrid cell. With "EditorBehavior", you can create an editable grid that contains a variety of widgets, including text fields, check boxes, and combo boxes.

EditorBehavior is very similar to "behaviors" and "headerBehaviors" properties of a DataGrid. The delegate for EditorBehavior is:
 Delegate EditorBehavior(grid DataGrid in, cell Widget in, rowData any in, dataIndex int in, column DataGridColumn in, value any in) returns(Widget) end  
 where:
  • grid is the DataGrid itself
  • cell is the current cell of the grid
  • rowData is the record / dictionary of current row
  • rowIndex is the current row index
  • column is the current column widget, and
  • value is the cell data value of any type
The behavior must return a widget, which is placed in the DataGrid cell. 
 
When using editorBehavior, you must first define the editorBehavior in the DataGrid definition. You then implement the delegate function to return a widget for each cell. The following code demonstrates the usage of editorBehavior.
 grid DataGrid {  
editorBehaviors = [myFunction],
id = "EditorBehaviorDemo",
columns = [
new DataGridColumn { name = "id", displayName = "ID"},
new DataGridColumn { name = "age", displayName = "Age"},
new DataGridColumn { name = "name", displayName = "First Name"},
new DataGridColumn { name = "home", displayName = "@Home"}
],
pageSize = 7,
margin = 20
};
function myFunction(grid DataGrid in, cell Widget in,rowData any in, rowIndex int in, column DataGridColumn in, value any in) returns (Widget)
// Set different widgets for different column cells.
case(column.name)
when("name")
combo Combo { width = 50,values = [ "Jane", "Joe", "Mary", "Fred" ], onChange ::= handleComboChange };
selIndex int = 0;
for (n int from 1 to combo.values.getSize() by 1)
if (value as String == combo.values[n])
selIndex = n;
exit for;
end
end
combo.selection = selIndex;
return (combo);
when("age")
editor TextField {
backgroundColor = "transparent",
borderWidth = 1,
padding = 0,
marginTop = -1,
marginBottom = -1,
text = value,
fontSize = "1.0em",
onChange ::= handleTextFieldChange,
class = "EditableGridEditor"
};
return (editor);
when("home")
editor CheckBox {
selected = (value as String == "true"),
onChange ::= handleCheckBoxChange,
class = "EditableGridCheckBox"
};
return (editor);
otherwise
return (null);
end
end
 
The DataGrid will look like the snapshot below:
 

You can put multiple widgets into a container such as Box or GridLayout, and return it in a EditorBehavior to embed multiple widgets. You can find more more information about DataGrid functions and properties in the RBD Information Center.
 
Including editable widgets in your DataGrid enhances the user experience since data editing can be done quickly and inline versus navigating to another page.  We hope you'll take advantage of the EditorBehavior functionality of  DataGrid in your rich UI applications!
 
JiYong