Grid

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.

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.

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

•   icon adds a new column to the grid. Set the Name and display Position (optional) which may be modified later.
•  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:
    
• removes 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 rows. Available 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.

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)

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)

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

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.

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.

• 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

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 

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.

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).

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.