🚀 Welcome to MDriven Learn –  MDriven is now on Discord!  Don’t miss the latest Release Notes.
Implement Cell Level ReadOnly in ViewModelColumns
This page was created by Wikiadmin on 2026-07-29. Last edited by Wikiadmin on 2026-07-29.

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

  1. In MDriven Designer, open the ViewModel that contains the grid nesting.
  2. Ensure that the grid nesting is configured as an editable AngularJS grid. Set Editable=true on the nesting that holds the grid columns.
  3. Identify the column that users edit. For example, use Attribute2.
  4. Add a sibling ViewModel column named Attribute2_ReadOnly.
  5. Set the sibling column expression to an OCL expression that returns a Boolean for the current row.
  6. Save the ViewModel and test rows that make the expression both true and false.

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=true in 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 true and one where it is false.
  • 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.

See also