Dynamic Grid Component

The Dyanmic Grid component is a Centauri (1.0) runtime component and is not supported in the Vega (2.0)  runtime.

The Dynamic Grid component combines the ease and usability of a spreadsheet with the power and flexibility of an Unqork grid component. In Express View, your end-user gets a streamlined, spreadsheet-like data entry and exploration experience. Built with large-scale data sets in mind, use a Dynamic Grid to focus on supporting high-performance data consumption, analysis, and exploration use cases. Dynamic Grid also includes features like pivot mode, data aggregation and grouping, and more.

You have various options for populating your Dynamic Grid component:

Whenever data entry takes place, ensuring the integrity of your data is important. That's why the Dynamic Grid component provides a strong validation framework. When configuring your Dynamic Grid component, you’ll assign each column a column type. For example, a Number, Text Field, or Checkbox. Having defined column types means your end-user can only enter values that match your data model. You can also set column-specific validation rules for even greater control.

You'll find the Dynamic Grid component under the Display & Layout group to the left of the Module Builder.

About the Configuration Window

To learn more about general component settings, view our General Component Settings article.

A static image displaying the Dynamic Grid's Display settings.

Setting

Description

Title

The heading of the grid. The end-user sees this title at the top of the grid in Express View.

It's best practice to always include a title. To hide the title in Express View, set Hide Title to  (ON).

Tooltip

A short hint that displays when an end-user positions their cursor over the (Tooltip) icon. Tooltips can display across more than one line.

The tooltip displays next to the title.

Helper Text

A quick tip describing the expected inputs or how to use the grid. The Helper Text displays below the Dynamic Grid component's title in Express View.

Custom CSS Class

Enter a Custom CSS Class to apply to your component. Custom CSS lets you maintain a consistent look and feel when the field or element is part of a template or multiple modules.

Updated CSS styling applies to all components that reference this custom class name.

Grid Height

Select how to set the maximum height of the grid.

Options include the following:

  • Define Fixed Height by Unit: Define the grid height in pixels.

  • Define Height by Number of Records: Specify the number of records to show before enabling scrolling.

  • Auto Height: The grid height scales to show all records.

Enabling Auto Height negatively impacts performance when displaying a large number of records (greater than 500).

Set Grid Height

Set the height of your grid. The unit depends on your Grid Height setting selection.

  • Define Fixed Height by Unit: Enter the grid height in pixels. Grid height must be between 93 and 20,211 pixels. By default, the grid height is set to 600 pixels.

  • Define Height by Number of Records: Enter the number of records to show before enabling scrolling. Grid height must be between 1 and 480 records. By default, the grid height is set to 15 records.

Hide Component

Shows or hides the component from view. Setting the Hide Field to Checked Box Icon (checked) hides the component in Express View. Setting it to ☐ (unchecked) displays the component. The component is always visible in the Module Builder.

By default, Hide Component is set to ☐ (unchecked).

Hide Title

Setting the Hide Title toggle to  (ON) stops the title from displaying in Express View. The title still displays in the Module Builder.

By default, Hide Title is set to (OFF).

Customize Add Row Button

When set to  (ON), you can customize the appearance of the default Add Row button shown in Express View.

By default, Customize Add Row Button is set to (OFF).

Button Label Text

The Button's Label Text tells your end-user what the button does before they click it. This text shows in the button itself.

By default, the Button Label Text is Add Row.

Button Style

Sets the visual appearance of the button. Options include: Primary, Secondary, Success, Danger, Warning, Info, Light, Dark, and Link. The Button Style only affects the Button component's appearance and does not effect its function.

Custom CSS Class

Enter a Custom CSS Class to apply to the Add Row button. When you update the CSS styling, it applies to all elements that reference this custom class name.

Left/Right Icon

Use these fields to add icons (glyphs) to the left or right of your Button's Label Text. For example, entering glyphicon glyphicon-pencil adds an icon of a pencil to your Button.

The full list of supported GLYPHICONS® glyph codes is available here: https://getbootstrap.com/docs/3.3/components/.

Let's look at how to set up a Dynamic Grid component that supports inline editing. This simple configuration focuses on supporting basic data entry rather than performing analytics.

Configure the Dynamic Grid Component

For this configuration, you'll add every column type to your Dynamic Grid component. But, you only need to open up the column type configuration window for two of them: the Single-Select Dropdown and Multi-Select Dropdown. For the other column types in your Column Setup table, you can keep the default settings.

1. Drag and drop a Grid Component Icon Dynamic Grid component onto your canvas.
2. In theProperty ID field, enter dynamicGrid.
3. In the Title field, enter Tri-State Insurance.
4. In the Column Setup table, click Add  New Column seven times. This adds seven rows to the Column Setup list.
5. In the Header Label, Property ID, and Column Type fields, ente the following
6. Complete the Column Setup as follows:
Header Label Property ID Editable Store Data Column Type

Name

name

Checked Box Icon (checked))

Checked Box Icon (checked)

 Text Field

Annual Income

incomeAnnual

Checked Box Icon (checked)

Checked Box Icon (checked)

Number

Date of Birth

dob

Checked Box Icon (checked)

Checked Box Icon (checked)

Date Input Icon Date Input

New Client

newClient

Checked Box Icon (checked)

Checked Box Icon (checked)

Single Checkbox component Icon Single Checkbox

State

state

Checked Box Icon (checked)

Checked Box Icon (checked)

Dropdown Component Icon Single-Select Dropdown

Types of Insurance

insuranceTypes

Checked Box Icon (checked)

Checked Box Icon (checked)

Text Field Component Icon Multi-Select Dropdown

Delete Row

delete

☐ (unchecked)

☐ (unchecked)

Button component Icon Button

Configure the Single-Select Dropdown Column Type

Next, add some values to the Single-Select Dropdown.

1. In the State row of your Column Setup table, click the (Settings) button. The Single-Select Dropdown column type configuration settings display.
2. In the Data panel, click Add Value three times and complete the Values settings as follows:
  Label Value

1

New York

NY

2

New Jersey

NJ

3

Connecticut

CT

3. Click Save. The Column type settings close.

Configure the Multi-Select Dropdown Column Type

Finally, add some values to the Multi-Select Dropdown.

1. In the Types of Insurance row of your Column Setup table, click the (Settings) button. The Multi-Select Dropdown column type configuration window opens.
2. In the Data panel, click Add Value five times and complete the Values table as follows:
Option Label Data Source Value

Health

health

Renters

renters

Auto

auto

Home

home

Life

life

3. Click Save. The Column type settings close.
4. Click Save Component.
5. Save your module.

Now you're ready to preview your module and interact with the grid. Your completed Dynamic Grid component looks like this in Express View:

Take a moment to understand how data entered in a Dynamic Grid component stores, using the configuration above.

Understanding this structure is also key when importing data into your Dynamic Grid component. Whether using a Data Reference Key or referencing a data collection, the source data's structure must match how the Dynamic Grid component stores data.

Data entered in the Dynamic Grid component stores as an array of objects under a single key. The top-level key is the Dynamic Grid component's Property ID. Each row added to the Dynamic Grid component in Express View becomes a new object in the array of row objects. In each row object, row-specific values store as explicit key/value pairs, where the key is the Property ID associated with that column. Depending on the column type, values store as different data types and data structures. The following image shows an example of how two rows of data entered in a Dynamic Grid component looks in the DevTools Console:

Discover how to reference data from a Dynamic Grid component, view our Dynamic Grid: Targeted Logic and Referencing Syntax article.

The Dynamic Grid supports several keyboard interactions that make it quick to navigate or edit the grid in Express View.

Grid Navigation

The following shortcuts for navigation are supported:

  • Using arrow keys to navigate between cells (any direction). It's important to note that the arrow keys only work when you start navigation in a cell that isn't set up with edit mode.

  • Pressing Tab (navigate right) and Shift + Tab (navigate left) to move between cells.

If actively editing cells, using these shortcuts to navigate between cells doesn't halt the editing state.

  • Pressing Enter to enter or exit the editing state on an editable cell.

You can also double-click a cell to enter the editing state. Or if you prefer to use a single-click, adjust the Invoking Cell Edit State setting.

Cell Editing

It's important to note that cell editing shortcuts only work when the grid is editable. The following cell editing shortcuts are supported:

  • Pressing Enter or clicking outside of the cell you're actively editing to commit any changes made. You'll also use the Enter key to execute buttons.

  • Pressing Esc to discard any changes to the cell you're actively editing.

It's also important to note that end-users can execute any cell with a Value is Clicked trigger applied by pressing Alt + Enter.

Checkboxes

There are a few shortcuts specific to checkboxes.

If end-users aren't editing a checkbox cell, they can select and clear boxes by either:

  • Pressing Enter.

  • Single-clicking in the checkbox.

  • Single or double-clicking outside the checkbox.

The last option depends on the Invoking Cell Edit State setting.

If end-users are editing a checkbox cell, they can select and clear boxes by either:

  • Pressing Enter.

  • Single-clicking in the checkbox.

  • Single or double-clicking outside the checkbox.