Skip to main content
Matrix42 Self-Service Help Center


Basic grid settings in the Layout designer and grid properties configuration examples.


This how-to explains the basics of the Grid settings and provides examples of the properties configuration.

The main purpose of the grid type is to display data that is stored as an array and shown as static columns, according to the grid configuration. 

For more information about Grid Control types and use cases see Grid Controls page.


Grid is added and configured after the following steps:

  1. Administration application: open a Solution Builder;
  2. User Interface  Layouts: create new or edit existing layout;
  3. Data model: click "Customize" layout action and drag&drop an array with data from the Data Model section on the layout designer canvas. 

Grid is most often used in such layouts:

  • Dialog
  • Preview
  • Wizard
  • Landing Page
  • Dataset View

Minimal required property settings

For proper grid displaying it is necessary to define the source of data retrieval to the grid and columns to show.

The following data model properties are minimum required for the grid displaying:

  • Model: define properties for 
    • Data
    • Columns with defined Property Paths
  • Common:
    • Name

The rest of the properties are assigned by default and can be optionally modified if necessary. Other properties define the add, edit, and delete modes of the grid records and the grid's look&feel.

Default Basic Grid Characteristics

By default, each grid with the configured minimum required properties results in the following page elements:

  • Grid header with search text area, standard buttons (pagination, refresh button), and settings (sown items per page, row style, and displayed columns)
  • Row selection
  • Grid columns according to the grid configuration
  • Data from the selected source


Grid preview example with default grid characteristics


Properties and settings

The table provides a detailed list of configurable multi-fragment grid properties, their settings, and particularities overview.

Property group Property name Description Default Property setting example



Defines the data source of the data which can be displayed in the grid. Choose the source of an array type from the Data Model.


Selected Items

optional property of a data model that acts as a variable. Allows passing the manually selected items of the grid to a specified data model field.

Additionally requires Enable Row Selection property set to true to enable multiple items selection column displaying in the grid.



Define the columns of the Data source that are actually displayed in the grid, their title, and displaying order: 

  •  add_column.png icon adds a new column to the grid. Set the Name and display Position (optional) which may be modified later.
  • column_position.png icon allows modifying the column Name and display Position
    • Name: is displayed as a column header in the application if the Title is not defined;
    • Position (optional): if the Position is not set, the columns are displayed in the same order as they were added to the grid and displayed in the current grid Columns configuration section. 
      Set a numeric integer value to define the column display order. The first column in the grid will have the lowest number:
  • remove_column.pngremoves the column from the grid.

Each Column has the following configurable properties:

  • Title: the title of the column which is displayed in the grid's header row. 
    • Localizable: plain text specified per each available in the system locale. Shows appropriate localized title according to the currently selected user language in the profile settings;
    • Static Value: displays manually entered text in the title;
  • Visible:  checkbox defines if the column is shown in the grid. Available options:
    • selected (default): the column is shown in the grid;
    • disabled: the column is not shown in the grid;
  • Width: optionally defined width of the column. Set the numeric value according to the selected measuring unit from the suggested list:
    • px (default)
    • %
    • em
    • rem
  • Alignment: text alignment in the grid rowsAvailable options: 
    • Left
    • Center (default)
    • Right
  • Type: rows' data type.  Available options: 
    • String (default)
    • Number
    • Currency
    • Date
  • Property Path: select the data path for the column. Choose the value from the same Configuration Item and Data Definition selected in the Data property of the Grid configuration.

Current item

optional property of a data model that acts as a variable. Allows passing the data of a just-clicked item of the grid to a specified data model field.

Select the necessary source from a list of suggested data model fields of an Object data type only or

  1. create a new Calculated property data source of an Object type :
  2. assign  Calculated property  to the  Current Item field:

Example: a row of a grid is edited using a wizard. Current item usage is as follows:

  • click on a record of the grid;
  • the system passes data from the row to an edit page. In this case, data is passed to the Current item;
  • modify data and introduce necessary changes. Changes are made to the field specified in the Current item;
  • save and apply changes. Data from the Current item is passed to the actual data structure of the grid.



help icon and tooltip for information displaying as:

  • ❌  not set: help icon is not displayed;
  • static value: manually entered text displayed in a pop-up window.
  • localizable:  plain text specified per each available in the system locale. Shows appropriate localized help message according to the currently selected by the user language profile settings;
  • model: displayed data is retrieved from a specified data model field.


Help icon with a tooltip displaying example



title of the grid. Can be set via one of the following options:

  • not selected:  grid title is empty and not displayed;
  • static value: manually entered title of the grid;
  • localizable: grid title is specified per each available in the system locale. Shows appropriate localized title according to the currently selected by the user language profile settings;
  • model: displayed data is retrieved from a specified data model field.


Localizable grid label example



Static value: check-box options

  • disabled (false): search field and all buttons displayed in the grid's header row are available (if the hide grid header option is disabled), and row selection is available as well (if the row selection option is enabled);
  • selected (true): header row is shown but all options like pagination, refresh, etc. are disabled. Search Text is the only active field and column search is not affected by this option as well:
    Grid header row displaying example: the disabled property is set to true.
  • Model: suggests boolean data options from the data model (true/false values)

See also Read-only property configuration.

False disabled_false.png


The read-only option is supported if the disabled option is set to false and row selection is enabled:

  • Static value: check-box options

    • disabled (false): row selection is available
    • selected (true): row selection is disabled
  • Model: suggests boolean data options from the data model (true/false values)
False read-only_false.png


Required field with automatically generated name or identifier of the grid. 

auto-generated grid_name.png


Full Height

Check-box options:

  • disabled: the grid takes only a part of the page's working area and shows 10 first records. Use scrolling for other records preview or adjust the height with Minimal Height, px property.
  • selected: the grid preview expands and covers the entire available space of the page's working area.
Disabled grid_full_height.png

Minimal Height, px

defines the fixed height of the grid displayed on the page. This property is applicable and supported when the Full Height property is disabled.

Set and measured in pixels, for instance: "100".

The specified height is spread upon the entire grid representation, including the grid's header, grid heading row, and displayed records data.


Enable row selection

  • Model: row selection mode is defined by the property from the model;
  • Static value: check-box options
    • selected (true): default option allows selecting specific or all rows of the grid and is displayed as the first column of the grid with check-boxes as shown in the example below
    • disabled (false): rows cannot be selected and the row selection column is not shown in the grid
True enable_row_selection_true.png

Hide Grid Header

Check-box options:

  • disabled (default): grid header is displayed on the page layout. The header includes:
    • search text area;
    • standard buttons (pagination, refresh button);
    • settings (sown items per page, row style, and displayed columns).
  • selected: header is not displayed,  only grid heading row with sortable columns titles and the available in the grid records are shown:

Grid preview with enabled Hide Grid Header property 

Disabled grid_hide_grid_header.png


Grid display on the page modes:

  1. Static value: check-box options
    • selected (True): grid displaying on the page layout template is enabled; 
    • disabled (False): the grid is not shown on the page layout template.
  2. Model:
    • Assign Model: select the source from the data model;
    • Advanced Model: additional data processing and filtering conditions in JavaScript language.
True clipboard_ef748af5414dd44fb723697c41161887d.png


set property creates additional blank space outside of the borders of the element containing the grid.

Set control's margin in CSS format measured in px or rem:

  • '10px', '1rem'  (top, right, bottom, left);
  • '1rem 2rem' (top-bottom, right-left); 
  • '1px 2px 3px 4px' (top, right, bottom, left).


the property is used to generate additional blank space around the grid's content, inside of the borders of the element containing the grid. 

Set control's padding in CSS format  measured in px or rem:

  • '10px', '1rem'  (top, right, bottom, left);
  • '1rem 2rem' (top-bottom, right-left); 
  • '1px 2px 3px 4px' (top, right, bottom, left).

Device visibility


This property allows improving user experience by managing device visibility options. For instance, the grid can be hidden from the preview when it is too large and contains a lot of columns that cannot fit the small screen of a mobile device.

The application checks the user device's screen resolution and shows or hides grid preview based on the selected check-box options settings:

  • disabled: the grid is not displayed;
  • selected (default): the grid is shown on the page.


Device visibility settings example:  grid is enabled for desktop devices only.

Enabled clipboard_eb901040d88572e905a56dde0cd58b948.png






  • Was this article helpful?