You use Nesting.Editable to allow users of an AngularJS grid to edit its cells by setting Editable=true on the Nesting that contains the grid columns.
What it controls
A Nesting is the blue element within a top-level green ViewModel in MDriven Designer. When that Nesting is rendered as a table or grid, its Editable tagged value determines whether the AngularJS client permits editing in the grid.
Set the tagged value on the Nesting that holds the columns, not on an individual column.
| Client | When grid cells are editable |
|---|---|
| AngularJS | The Nesting that holds the grid columns has the tagged value Editable=true.
|
| WPF | The cell is editable when its ReadOnlyExpression does not evaluate to false.
|
Enable editing in an AngularJS grid
- Open the ViewModel that contains the table or grid in MDriven Designer.
- Select the Nesting that contains the grid columns.
- Add or set the Nesting tagged value to
Editable=true. - Run the application and verify that a user can edit a cell in the rendered grid.
For example, a Nesting named Orders may contain the columns OrderNumber, Customer, and Status. Set Editable=true on Orders to make those grid cells available for editing in the AngularJS client.
Use read-only rules where needed
The Editable tagged value enables editing at the grid level in AngularJS. Use a ReadOnlyExpression when an editing rule depends on the current object or application state.
For example, an order grid can be editable, while a read-only rule prevents changes when an order is closed. In AngularJS editable grids, versions after 2022-05-02 can also use a <Name>_ReadOnly column for cell-level read-only control. This cell-level option is not available for WPF editable grids.
Related grid behavior
Editability is independent of selection and client-side sorting. Configure these behaviors on their respective Nesting settings when required.