You can configure a list in a ViewModel as a table or grid, choose how users select rows, and make actions operate on the current row or on multiple selected rows.

Tables and grids in MDriven

A table (also called a grid or list in this context) renders a collection of ViewModel objects as rows. Each displayed ViewModel attribute becomes a column, and each object in the collection becomes one row.

For example, a customer list can show one row per customer with columns for Name, Phone, and Status. The user can select a customer row and run an action such as Show.

This page covers row selection and actions. Use the linked pages for editing, visual styling, data retrieval, and specialized layouts.

Choose row-selection behavior

A list can work in one of three practical modes:

Mode	What the user experiences	Use it when
Default row handling	Clicking a row shows its action pop-up menu. If there is only one available action, that default action is performed.	A row normally opens a detail view, such as a Show action.
Always show actions	The list works as a single-selection list. Actions for the current row appear in the left menu. Clicking a row selects it; it does not open the row action menu or run the default action.	Users need to select a row first and then choose an explicit action.
Multi-select	Users can select and deselect individual rows. The selected objects are made available through vSelected.	One action must work on several rows, such as approving selected orders.

Default single-row handling

By default, a list responds directly to a row click:

• MDriven shows a pop-up menu when the list has available actions.
• If only one action is available, MDriven performs that action as the default action.
• A common default action is Show, which navigates to the object represented by the clicked row.

For example, in a list of support cases, a single Show case action can open the selected case when the user clicks its row.

Show actions separately from the row

Set Always show actions on the ViewModel class that represents the list when you want the user to select a row and choose an action from the left menu.

1. In MDriven Designer, select the ViewModel class that represents the list.
2. Enable Always show actions.
3. Add or opt in the actions that should be available for the current row.
4. Run the ViewModel and select a row.
5. Use the actions shown in the left menu.

With this setting, clicking a row does not show the pop-up action menu and does not perform a sole default action. It changes the current row instead.

A list that has no opted-in actions is also rendered as a single-selection list.

Enable multi-select

Use multi-select when an action needs a collection of selected rows rather than one current row. Add the MultiSelect tagged value with the Boolean value True to the ViewModel class for the list.

1. In MDriven Designer, select the ViewModel class that represents the list.
2. Open TV and Attributes.
3. Add MultiSelect with the value True in the Value Store.
4. Add the Value Store value to the ViewModel.
5. Run the ViewModel and select or deselect rows in the list.

The client updates vSelected as the user changes the selection. Make the server action operate on the vSelected collection.

For example, an order list can expose an Approve selected orders action. The user selects three pending orders, and the server action uses vSelected to process those three objects rather than the whole list.

Multi-select considerations

• Use multi-select only when the action has a clear meaning for every selected object.
• Design the server action to handle an empty vSelected collection.
• Keep a single-row action separate when it needs one current object, for example Edit customer.

Actions in tables

Actions placed in a table can be class actions, ViewModel/context actions, or actions defined with EAL in a ViewModel. Class actions and EAL actions work in tables and are enabled or disabled in the same way as actions elsewhere.

ViewModel/context actions are shown as disabled in tables. For the detailed action behavior and the supported action types, see Documentation:Web client actions in tables.

Related table features

This page does not configure every aspect of a rendered list:

• To make a table editable or read-only, see Documentation:Nesting.Editable.
• To style a column, row, or individual cell, see Documentation:Table Grid Column Style and HowTos:Styling and CSS for Bootstrap, Angular and MVC. For example, an attribute named Status_CssClass can provide a CSS class for the Status cell on each rendered row.
• To implement searching, filtering, ordering, and large result sets correctly, see Documentation:Tables, search and ordering. If the client displays only a partial server-side result, a change of ordering must rerun the server-side search; sorting only the loaded rows does not sort the complete result.
• To render a pivot-style layout with cell-specific content and actions, see Documentation:Pivot tables.

See also

• Documentation:Nesting.Editable
• Documentation:Web client actions in tables
• Documentation:Tables, search and ordering
• Documentation:Table Grid Column Style
• Documentation:Pivot tables