Clicking the settings icon in the Actions column of the Dynamic Grid Column Setup table opens a column configuration modal. The modal displays the column's Header Label and Property ID for reference. Settings are organized by column type.
For an overview of the Dynamic Grid component and its general settings, see Dynamic Grid Component.
How to read settings tables
The tables below describe each configurable option as it displays in the Unqork IDE. Values are formatted as follows:
inline code— a value to type exactly as shown | Bold — a value selected from a drop-down, radio button, tab, or choice chip | ON/OFF — toggle state | ✓ — checkbox checked | ☐ — checkbox unchecked
Text Field
Display
Freeze Column to Left or Right Side of Grid
| Setting | Type | Default | Description |
|---|---|---|---|
| Freeze Column | Toggle | OFF | When set to ON, this setting pins the column to a fixed position in the grid. |
| Column Placement | Radio button | — | The side of the grid where the column is pinned. Options include: Left side of grid and Right side of grid. Visible when Freeze Column is ON. |
Column
| Setting | Type | Default | Description |
|---|---|---|---|
| custom CSS class | Text input | — | A custom CSS class applied to the column cells. |
| Allow Text Wrapping | Toggle | OFF | When set to ON, this setting wraps text in column cells instead of truncating it. |
Header
| Setting | Type | Default | Description |
|---|---|---|---|
| Tooltip | Text input | — | A short hint that displays when a cursor is positioned over the column header. |
| Custom CSS Class | Text input | — | A custom CSS class applied to the column header. |
Actions
| Column | Type | Description |
|---|---|---|
| When... | Drop-down | The row event that triggers the action. Options include: Row is Added, Row is Deleted, Row is Edited, or Row is Saved. |
| Then... | Property ID | The Property ID of the component to trigger when the event occurs. |
Validation
Column Values Required
| Setting | Type | Default | Description |
|---|---|---|---|
| Required | Toggle | OFF | When set to ON, this setting requires the column to have a value before the row can be saved. |
| Error Message | Text input | is required |
The error message displayed when the required condition is not met. |
Allowed Characters for Column Values
| Setting | Type | Default | Description |
|---|---|---|---|
| Set Minimum | Number input | 0 |
The minimum number of characters allowed in the column. |
| Min Length Error Message | Text input | — | The error message displayed when the value is shorter than the minimum. |
| Set Maximum | Number input | 0 |
The maximum number of characters allowed in the column. |
| Max Length Error Message | Text input | — | The error message displayed when the value exceeds the maximum. |
Number
Display
Freeze Column to Left or Right Side of Grid
| Setting | Type | Default | Description |
|---|---|---|---|
| Freeze Column | Toggle | OFF | When set to ON, this setting pins the column to a fixed position in the grid. |
| Column Placement | Radio button | — | The side of the grid where the column is pinned. Options include: Left side of grid and Right side of grid. Visible when Freeze Column is ON. |
Column
| Setting | Type | Default | Description |
|---|---|---|---|
| Format as | Radio button | Number | The display format for column values. Options include: Number and Percentage (%). |
| Decimal Places | Number input | 0 |
The number of decimal places to display. |
| Show Thousands Separator | Toggle | OFF | When set to ON, this setting displays a thousands separator in column values. |
Header
| Setting | Type | Default | Description |
|---|---|---|---|
| Tooltip | Text input | — | A short hint that displays when a cursor is positioned over the column header. |
| Custom CSS Class | Text input | — | A custom CSS class applied to the column header. |
Actions
| Column | Type | Description |
|---|---|---|
| When... | Drop-down | The row event that triggers the action. Options include: Row is Added, Row is Deleted, Row is Edited, or Row is Saved. |
| Then... | Property ID | The Property ID of the component to trigger when the event occurs. |
Validation
Column Values Required
| Setting | Type | Default | Description |
|---|---|---|---|
| Required | Toggle | OFF | When set to ON, this setting requires the column to have a value before the row can be saved. |
| Error Message | Text input | is required |
The error message displayed when the required condition is not met. |
Valid Number Range for Column Values
| Setting | Type | Default | Description |
|---|---|---|---|
| Set Minimum | Number input | 0 |
The minimum valid value for the column. |
| Min Length Error Message | Text input | — | The error message displayed when the value is below the minimum. |
| Set Maximum | Number input | 0 |
The maximum valid value for the column. |
| Max Length Error Message | Text input | — | The error message displayed when the value exceeds the maximum. |
Checkbox
Display
Freeze Column to Left or Right Side of Grid
| Setting | Type | Default | Description |
|---|---|---|---|
| Freeze Column | Toggle | OFF | When set to ON, this setting pins the column to a fixed position in the grid. |
| Column Placement | Radio button | — | The side of the grid where the column is pinned. Options include: Left side of grid and Right side of grid. Visible when Freeze Column is ON. |
Column
| Setting | Type | Default | Description |
|---|---|---|---|
| Custom CSS Class | Text input | — | A custom CSS class applied to the column cells. |
| Allow Text Wrapping | Toggle | OFF | When set to ON, this setting wraps text in column cells instead of truncating it. |
Header
| Setting | Type | Default | Description |
|---|---|---|---|
| Tooltip | Text input | — | A short hint that displays when a cursor is positioned over the column header. |
| Custom CSS Class | Text input | — | A custom CSS class applied to the column header. |
Data
| Setting | Type | Default | Description |
|---|---|---|---|
| Column Is Checked by Default | Toggle | OFF | When set to ON, this setting checks the checkbox in each new row by default. |
Actions
| Column | Type | Description |
|---|---|---|
| When... | Drop-down | The row event that triggers the action. Options include: Row is Added, Row is Deleted, Row is Edited, or Row is Saved. |
| Then... | Property ID | The Property ID of the component to trigger when the event occurs. |
Validation
Column Values Required
| Setting | Type | Default | Description |
|---|---|---|---|
| Required | Toggle | OFF | When set to ON, this setting requires the column to have a value before the row can be saved. |
| Error Message | Text input | is required |
The error message displayed when the required condition is not met. |
Single-Select Dropdown
Display
Freeze Column to Left or Right Side of Grid
| Setting | Type | Default | Description |
|---|---|---|---|
| Freeze Column | Toggle | OFF | When set to ON, this setting pins the column to a fixed position in the grid. |
| Column Placement | Radio button | — | The side of the grid where the column is pinned. Options include: Left side of grid and Right side of grid. Visible when Freeze Column is ON. |
Column
| Setting | Type | Default | Description |
|---|---|---|---|
| Custom CSS Class | Text input | — | A custom CSS class applied to the column cells. |
| Allow Text Wrapping | Toggle | OFF | When set to ON, this setting wraps text in column cells instead of truncating it. |
Header
| Setting | Type | Default | Description |
|---|---|---|---|
| Tooltip | Text input | — | A short hint that displays when a cursor is positioned over the column header. |
| Custom CSS Class | Text input | — | A custom CSS class applied to the column header. |
Data
Data Source Type
| Setting | Type | Default | Description |
|---|---|---|---|
| Data Source Type | Choice chip | Values | Sets how options are loaded. |
Values — Manually define a list of options.
Column Type Description Label Text input The display text shown to end-users for each option. Value Text input The value stored when the option is selected.
Data Reference key — Load options from another module field.
Setting Type Default Description Data Reference Key Property ID — The Property ID of a field that returns a JSON array to use as the option source. Value Property Text input — The property in each item to use as the stored value. Label Property Text input — The property in each item to use as the display label.
Actions
| Column | Type | Description |
|---|---|---|
| When... | Drop-down | The row event that triggers the action. Options include: Row is Added, Row is Deleted, Row is Edited, or Row is Saved. |
| Then... | Property ID | The Property ID of the component to trigger when the event occurs. |
Validation
Column Values Required
| Setting | Type | Default | Description |
|---|---|---|---|
| Required | Toggle | OFF | When set to ON, this setting requires the column to have a value before the row can be saved. |
| Error Message | Text input | is required |
The error message displayed when the required condition is not met. |
Multi-Select Dropdown
Display
Freeze Column to Left or Right Side of Grid
| Setting | Type | Default | Description |
|---|---|---|---|
| Freeze Column | Toggle | OFF | When set to ON, this setting pins the column to a fixed position in the grid. |
| Column Placement | Radio button | — | The side of the grid where the column is pinned. Options include: Left side of grid and Right side of grid. Visible when Freeze Column is ON. |
Column
| Setting | Type | Default | Description |
|---|---|---|---|
| Custom CSS Class | Text input | — | A custom CSS class applied to the column cells. |
| Allow Text Wrapping | Toggle | OFF | When set to ON, this setting wraps text in column cells instead of truncating it. |
Header
| Setting | Type | Default | Description |
|---|---|---|---|
| Tooltip | Text input | — | A short hint that displays when a cursor is positioned over the column header. |
| Custom CSS Class | Text input | — | A custom CSS class applied to the column header. |
Data
Data Source Type
| Setting | Type | Default | Description |
|---|---|---|---|
| Data Source Type | Choice chip | Values | Sets how options are loaded. |
Values — Manually define a list of options.
Column Type Description Label Text input The display text shown to end-users for each option. Value Text input The value stored when the option is selected.
Data Reference Key — Load options from another module field.
Setting Type Default Description Data Reference Key Property ID — The Property ID of a field that returns a JSON array to use as the option source. Value Property Text input — The property in each item to use as the stored value. Label Property Text input — The property in each item to use as the display label.
Actions
| Column | Type | Description |
|---|---|---|
| When... | Drop-down | The row event that triggers the action. Options include: Row is Added, Row is Deleted, Row is Edited, or Row is Saved. |
| Then... | Property ID | The Property ID of the component to trigger when the event occurs. |
Validation
Column Values Required
| Setting | Type | Default | Description |
|---|---|---|---|
| Required | Toggle | OFF | When set to ON, this setting requires the column to have a value before the row can be saved. |
| Error Message | Text input | is required |
The error message displayed when the required condition is not met. |
Button
Display
Freeze Column to Left or Right Side of Grid
| Setting | Type | Default | Description |
|---|---|---|---|
| Freeze Column | Toggle | OFF | When set to ON, this setting pins the column to a fixed position in the grid. |
| Column Placement | Radio button | — | The side of the grid where the column is pinned. Options include: Left side of grid and Right side of grid. Visible when Freeze Column is ON. |
Column
| Setting | Type | Default | Description |
|---|---|---|---|
| Custom CSS Class | Text input | — | A custom CSS class applied to the column cells. |
| Button Style | Drop-down | Primary | The color style of the buttons in this column. Options include: Primary, Secondary, Success, Danger, Warning, Info, Light, Dark, or Link. |
| Disable Buttons | Toggle | OFF | When set to ON, this setting disables all buttons in the column. |
| Hide Buttons | Toggle | OFF | When set to ON, this setting hides all buttons in the column. |
Header
| Setting | Type | Default | Description |
|---|---|---|---|
| Tooltip | Text input | — | A short hint that displays when a cursor is positioned over the column header. |
| Custom CSS Class | Text input | — | A custom CSS class applied to the column header. |
Actions
When button is clicked
| Setting | Type | Default | Description |
|---|---|---|---|
| Then... | Drop-down | — | The action to perform when the button is clicked. Options include: Delete row and Custom action. |
| Property ID | Property ID | — | The Property ID of the component to trigger. Visible when Then... is Custom action. |
Date
Display
Freeze Column to Left or Right Side of Grid
| Setting | Type | Default | Description |
|---|---|---|---|
| Freeze Column | Toggle | OFF | When set to ON, this setting pins the column to a fixed position in the grid. |
| Column Placement | Radio button | — | The side of the grid where the column is pinned. Options include: Left side of grid and Right side of grid. Visible when Freeze Column is ON. |
Column
| Setting | Type | Default | Description |
|---|---|---|---|
| Custom CSS Class | Text input | — | A custom CSS class applied to the column cells. |
| Date Format | Text input | mdY |
The format used to display and parse date values. |
| Field delimiter | Text input | / |
The character used to separate date parts. |
| Disable Automated Input Formatting | Toggle | OFF | When set to ON, this setting disables automatic formatting of date input values. |
| Enable Calendar View | Toggle | ON | When set to OFF, this setting hides the calendar date picker. |
| Open Date Picker Automatically When Editing | Toggle | OFF | When set to ON, this setting opens the date picker automatically when an end-user begins editing a cell. |
| Display (+/-) Years in Drop-Down | Number input | 10 |
The number of years before and after the current year to display in the year drop-down. |
Header
| Setting | Type | Default | Description |
|---|---|---|---|
| Tooltip | Text input | — | A short hint that displays when a cursor is positioned over the column header. |
| Custom CSS Class | Text input | — | A custom CSS class applied to the column header. |
Data
| Setting | Type | Default | Description |
|---|---|---|---|
| Store Date Only | Toggle | OFF | When set to ON, this setting stores only the date portion of the value, without time. |
Actions
Triggers
| Column | Type | Description |
|---|---|---|
| When... | Drop-down | The row event that triggers the action. Options include: Row is Added, Row is Deleted, Row is Edited, or Row is Saved. |
| Then... | Property ID | The Property ID of the component to trigger when the event occurs. |
Validation
Column Values Required
| Setting | Type | Default | Description |
|---|---|---|---|
| Required | Toggle | OFF | When set to ON, this setting requires the column to have a value before the row can be saved. |
| Error Message | Text input | is required |
The error message displayed when the required condition is not met. |
Valid Date
| Setting | Type | Default | Description |
|---|---|---|---|
| Error Message | Text input | — | The error message displayed when the column value is not a valid date. |
Valid Date Range for Column Values
| Setting | Type | Default | Description |
|---|---|---|---|
| Restrict to | Drop-down | None | Restricts the dates end-users can enter. Options include: None, Future Only, Past Only, Before a Date, After a Date, and Between Dates. |
Future Only
Setting Type Default Description Minimum Date Text input Current date The earliest date end-users can enter. Minimum Date Error Message Text input — The error message displayed when the date is before the minimum.
Past Only
Setting Type Default Description Maximum Date Text input Current date The latest date end-users can enter. Maximum Date Error Message Text input — The error message displayed when the date exceeds the maximum.
Before a Date
Setting Type Default Description Minimum Date Text input Current date The earliest date end-users can enter. Minimum Date Error Message Text input — The error message displayed when the date is before the minimum.
After a Date
Setting Type Default Description Maximum Date Text input Current date The latest date end-users can enter. Maximum Date Error Message Text input — The error message displayed when the date exceeds the maximum.
Between Dates
From: Sets how the start of the allowed date range is defined. Defaults to Exact Date.
From: option Additional settings Exact Date Minimum Date (text input), Minimum Date Error Message (text input) Relative (+/-) Minimum Date Error Message (text input), Offset (number input, default 0), Unit (drop-down: Days (default), Months, Years)Now Minimum Date Error Message (text input) To: Sets how the end of the allowed date range is defined. Defaults to Exact Date.
To: option Additional settings Exact Date Maximum Date (text input), Maximum Date Error Message (text input) Relative (+/-) Maximum Date Error Message (text input), Offset (number input, default 0), Unit (drop-down: Days (default), Months, Years)Now Maximum Date Error Message (text input)
Changelog
| Date | Change |
|---|---|
| — | Initial publication. |