You can configure users to edit values directly in a grid by enabling the grid and allowing editing for each relevant column; this page is for MDriven Designer users building WPF or AngularJS grid views.
How grid editing is decided
A grid is represented by a Nesting (the ViewModel class that supplies the grid rows). A ViewModelColumn is a column within that grid. To edit a cell, the grid and the column must both permit editing.
| UI technology | Grid requirement | Column requirement | Cell-level control |
|---|---|---|---|
| WPF | No separate Editable tagged value is required for the rule described here.
|
The column's ReadOnlyExpression must not evaluate to true.
|
Not described here. |
| AngularJS | Add the Editable tagged value with value True to the Nesting that represents the grid.
|
The column's ReadOnlyExpression must not evaluate to true.
|
Add a companion column named <Name>_ReadOnly. This is available for AngularJS editable grids.
|
An empty ReadOnlyExpression permits editing. An expression that evaluates to false also permits editing. An expression that evaluates to true makes the column read-only.
For example, an AngularJS grid can edit a DateSold column when the grid Nesting has Editable=True and the DateSold ViewModelColumn has an empty ReadOnlyExpression. If DateSold has ReadOnlyExpression=true, the cell remains read-only even though the grid is editable.
Enable editing in an AngularJS grid
- In MDriven Designer, select the Nesting header for the grid. Select the blue Nesting header, not an individual ViewModelColumn.
- Open Tagged values.
- If the available values are not shown, select Refresh from Wiki to load the predefined values into the Value Store.
- Add the
Editabletagged value to the Nesting and set its value toTrue. - Select each ViewModelColumn that users should edit.
- Clear its
ReadOnlyExpression, or set the expression so that it evaluates tofalsewhen editing is allowed. - Save and test the view in the web UI.
The Editable tagged value applies to the Nesting that holds the grid columns. Setting it elsewhere does not enable those grid cells.
Control a whole column
Use ReadOnlyExpression on a ViewModelColumn when the same rule applies to every row in that column.
For example, a historical-ownership grid can allow users to enter DateSold by clearing the DateSold column's ReadOnlyExpression. When a user enters a date, derived values in the row can recalculate immediately. The Bootcamp Chapter 7 example uses this approach for DateSold and a derived DatePurchased value.
A grid being editable affects the presentation of its columns. If a column is intended only as displayed text, set that ViewModelColumn's IsStatic value to true. For example, in an editable ownership grid, a person's name can remain a plain string while DateSold is edited.
Control individual AngularJS cells
For AngularJS editable grids, you can control read-only state per row and cell by adding a companion column named:
<Name>_ReadOnly
Replace <Name> with the name of the editable column. For example, use DateSold_ReadOnly to control individual cells in the DateSold column.
This companion-column convention is available only in AngularJS editable grids. The grid must still have Editable=True, and the primary column must not be made read-only by its own ReadOnlyExpression.
Troubleshooting
| Symptom | Check |
|---|---|
| No cells are editable in an AngularJS grid. | Select the grid's Nesting header and verify that its Editable tagged value is exactly True.
|
| One column remains read-only. | Check that the ViewModelColumn's ReadOnlyExpression does not evaluate to true.
|
| A cell should be read-only only for certain rows in AngularJS. | Add and populate the matching <Name>_ReadOnly companion column.
|
| A value appears as an editor although users should only read it. | Set the ViewModelColumn's IsStatic value to true, or remove the column if it is not needed.
|
Related grid behavior
Editing a value in an existing row is different from creating a row. For a grid row that accepts a value and then runs an action to create the object, use the GridAction pattern described in Documentation:WECPOF Goodies. For list selection and multi-row actions, see Documentation:Tables and Grids and Documentation:Nesting.MultiSelect.