You can make individual cells read-only in an AngularJS editable grid by adding a Boolean sibling ViewModel column named <ColumnName>_ReadOnly; this is for ViewModel designers who need a rule evaluated for each grid row.
Use cell-level read-only
A ViewModel column's normal ReadOnlyExpression is evaluated in the context of the ViewModel root. It therefore applies one result to the whole column.
To evaluate read-only status in the context of each row, add a sibling subcolumn expression. Name it after the displayed column, followed by _ReadOnly:
| Displayed column | Sibling read-only column | Required result |
|---|---|---|
Attribute2
|
Attribute2_ReadOnly
|
Boolean: true makes that row's Attribute2 cell read-only; false allows editing.
|
Quantity
|
Quantity_ReadOnly
|
A Boolean expression evaluated for the current grid row. |
When MDriven finds <Name>_ReadOnly, it uses that column's expression as the read-only status for <Name>, instead of the displayed column's own ReadOnlyExpression.
Availability and grid setup
Cell-level read-only is available for AngularJS editable grids. To make an AngularJS grid editable, set the tagged value Editable=true on the nesting that holds the grid columns. Grid columns then follow their read-only rules.
For WPF grids, consult Documentation:Edit in Grid. WPF editability follows the column ReadOnlyExpression; the supplied documentation does not describe _ReadOnly cell-level control for WPF.
Configure a per-row rule
- In MDriven Designer, open the ViewModel that contains the grid nesting.
- Ensure that the grid nesting is configured as an editable AngularJS grid. Set
Editable=trueon the nesting that holds the grid columns. - Identify the column that users edit. For example, use
Attribute2. - Add a sibling ViewModel column named
Attribute2_ReadOnly. - Set the sibling column expression to an OCL expression that returns a Boolean for the current row.
- Save the ViewModel and test rows that make the expression both
trueandfalse.
Use the ViewModel editor's Display sub columns option to show subcolumns while working with these expressions. The setting is persistent.
Example: unlock a cell when another value is valid
Assume each grid row has Attribute1 and Attribute2. Users may edit Attribute2 only after Attribute1 has the value 'Allowed'.
Create the following sibling column:
| Column name | Expression purpose | Result |
|---|---|---|
Attribute2_ReadOnly
|
Return true when Attribute1 is not 'Allowed'.
|
Attribute2 is locked for that row until Attribute1 becomes 'Allowed'.
|
For example, express the rule as an OCL Boolean condition equivalent to:
Attribute1 <> 'Allowed'
The important part is the result: when the expression is true, the matching cell is read-only. Because the sibling expression is evaluated for the row, one row can be locked while another row in the same column remains editable.
Understand column-level versus cell-level rules
| Mechanism | Evaluation context | Scope | Use it when |
|---|---|---|---|
| Column ReadOnlyExpression | ViewModel root | Entire column | Every row should have the same editability. |
<Name>_ReadOnly sibling column
|
Current grid row | Individual cell in each row | The decision depends on data in that row. |
Do not rely on a normal ReadOnlyExpression for a row-dependent rule. In a grid, the expression remains rooted at the ViewModel root rather than the individual row, so it cannot distinguish the separate row instances you see on screen.
Interaction with per-ViewModel and global read-only
Per-ViewModel read-only mode can add vSysReadOnlyMode to read-only logic. When global read-only mode is active, MDriven can rewrite a sibling expression such as:
vReadOnly
to an expression equivalent to:
vSysReadOnlyMode or (vReadOnly)
This ensures that the cell follows global read-only rules. It also has an important consequence: the rewritten expression is not editable through the UI, even if vReadOnly itself is a mutable Boolean variable.
Do not expose the helper as an editable checkbox
Do not display <Name>_ReadOnly as an editable UI column when global read-only mode is enabled. For example, if you expose Attribute2_ReadOnly as a checkbox and its expression is rewritten to vSysReadOnlyMode or (vReadOnly), the checkbox becomes non-editable. It is an expression-derived helper for the matching column, not a user-editable setting in this configuration.
If users need to switch between viewing and editing, use the read-only mode mechanisms described in Documentation:Per viewmodel ReadOnly mode rather than exposing the generated helper expression.
Related cell-level subcolumns
The sibling-column pattern also supports row-specific presentation. For example, a column named Amount_Style or Amount_CssClass can provide styling for the Amount cell in its rendered row. See HowTos:Styling and CSS for Bootstrap, Angular and MVC for the naming rules and CSS examples. This is separate from read-only behavior.
Test checklist
- Confirm that the grid nesting has
Editable=truein AngularJS. - Confirm that the helper name matches the displayed column name exactly, including
_ReadOnly. - Confirm that the helper expression returns a Boolean.
- Test one row where the expression is
trueand one where it isfalse. - Test with per-ViewModel or global read-only mode enabled if the application uses it.
- Keep the helper column out of the editable UI when global read-only can rewrite its expression.
