Editable Grids

How to configure and use the editable grid object

Updated over a week ago

The editable grid control allows the user to edit the data inside of a grid within the grid itself.

It is best used for tables with a small number of fields, since tables with a large number of fields will not fit given the limited width of the grid.

NOTE: The Editable Grid control does not automatically save the data. One would need to execute a Save All action (in a button, for example) to save the data in the grid.


Overview of Editable Grids

In the below example, the data in the second row is being edited:

  1. Filter views: Click the dropdown to filter the grid with set views.

  2. Search the grid: Search the visible fields in the grids. Any hidden columns will not be included in the search.

  3. Other options [] :

    • Refresh: This will reset any changes done in the grid.

    • Export: Export data in the grid as a CSV.

  4. Delete: Mark the row for deletion.

  5. Add Lines: Insert rows to potentially add data to the grid.

  6. Show: Change number of rows shown in a grid.

To use the Editable Grid control in your own customizations, you will configure it with the Grid Builder, which is available from the contextual menu of the Editable Grid control, or in the right properties panel when the control is selected.

The builder is separated into three areas:

  • Configuration: Set up the table to use as well as styling of the editable grid.

  • Columns: Set up the fields used as columns in the table and how to format it for viewing.

  • Views: Set the views the editable grid will have, including visibility, sorting, and filtering.


Grid Builder: Configuration

The Editable Grid's Configuration area has three sections to configure:

For example purposes, the grid is labeled EditableGrid and will be using the Contacts table as its base table.

Configuration: Data

  • Select a base table: the data shown in the Editable Grid.

  • Records per page: how many rows are shown in the Editable Grid. Do not choose "Display All" if you have a table with more than 10 records.

  • Disable all editing (read only): when checked, the table is viewable, but the user will not be able to edit the data inside of it.

  • Show go to page input field: show input field to allow users to type which page of the grid to navigate to if the grid has multiple pages.

  • Allow user to add more rows:

    • Button label (add more rows): Configure the text on the button which will add more rows to insert data.

    • Number of new rows to add: How many new rows are added when the "Add more rows" button is clicked.

Configuration: Styling

This allows you to set up what options are available on the editable grid.

  • Show delete row column: On each record, the right most column will be a trashcan so the user can select it for deletion. (This will not immediately delete the record).

  • Show delete confirmation dialog: When the grid is being saved, this will show a confirmation that the records will be deleted.

  • Hide view selector: If there are different filter views, you can hide the ability for the user to see and select a different view.

  • Add checkbox column: This will show a checkbox column on the left of the grid to allow the user to select multiple records.

  • Show search bar: Show or hide the search bar.

  • Show export button: Shows export link in Other options [] menu.

Configuration: Row Click Event

Selecting Edit Actions allows you to set up a set of actions that occur when a user clicks a row.

NOTE: The Row Click event is only triggered when clicking on a card column, or when the grid is in read only mode.


Grid Builder: Columns

The Columns area allows you to add fields to the Editable Grid from the base table specified from the Configuration area. Most fields you wish to add are similar when configuring, but there are special considerations for Dropdown columns and Button columns. Please see the appropriate sections for those. 

On the left will be a list of columns currently added to the Editable Grid. Required columns are separated into their own heading.

  • To add a column, select Add another column. There are three typs of columns you can add:

    • Field column: This a field from the table

    • Dropdown column: Although this is a field from a table, its uniqueness warrants a whole section you can see below.

    • Button column: A column that has a button it. See below for more information.

    • Card column: Allows you to display multiple fields in the same column. For more information, see below.

  • To delete a column, hover over the column you want deleted, and select the trashcan icon.

You can configure each column by selecting it from the list of columns. Each column will have a number of options to configure based on the type of the column. However, the following should be standard for the majority of fields:

Columns: General

  • Header Caption: the header text shown on the Editable Grid column.

  • Default Value: default value given to this field for new entries.

  • Show column total (Numeric fields only): Numeric fields have this checkbox to add a column total at the bottom of the grid (however, it will only show the total of the viewable page in the grid, not a total of all rows.) Furthermore, this checkbox will not show if the field is a linked field.

Columns: Formatting

  • This column is a read only column and can't be edited: check to make read only.

  • Width (Tablet & Desktop): set the width of the column relative to other columns. Small Medium and Large are dynamic relative sizes. When rendering, the relative size is set mathematically.

    • Small is 1 unit

    • Medium is 2 units

    • Large is 4 units.

      • For example: a table of [Small, Small, Medium, Large] is [1, 1, 2, 4] which totals 8. [1/8 is 12.5%, 1/8 is 12.5%, 2/8 is 25%, 4/8 is 50%].

    • Fixed Width: Enter in pixel amount for the width.

  • Alignment (Tablet & Desktop): how the data is aligned within the column (Left, Cetner, Right).

  • Format Options: Options for numerical fields only.

    • Rounding: Number of decimal places to round to.

    • Separator: Add comma to separate thousandth place.

Columns: Validation Rules

Fields can be set to check for validation. However, different field types will have different validation rules. To see a complete list, please check our article on Field Validation.

Columns: Actions

Each column may have different events associated with it to add actions to. Most fields will have the Change event available to configure. If it's a button column, then it will be a Click event.


Special column - Dropdown Columns

As mentioned above, a column can be of different types. However, there are a number of options to configure when the column is a dropdown field. Below is an example of an editable grid configured for the Activity table. The Contacts dropdown field has been added as a column, and you will see a section for Dropdown configuration:

Dropdown Column: Display Value 

By default, the data shown in the editable grid will be the Record ID of the option selected from the dropdown field.

In the below example, in the Contacts column, you can see the contact associated with the activity, but it's showing the contact's Record ID:

You can configure the default display value to point to a more appropriate field, however this field must be an already added Linked Field in the table. In our example, the Activity table has a number of linked fields for the Contacts dropdown, so we can choose the ContactsName linked field to show instead.

Dropdown Column: Columns

Once the display is set, you will see the contact's name when viewing the grid, but when you edit a row, the Record ID only shows:

To configure how the options look when they open the dropdown menu, you still need to configure the Columns under Dropdown configuration.

By default, only the RecordID field is shown. Click Add another column to add more columns to show in the dropdown.

In the below example, we made the RecordID field invisible by unchecking ☑ Show on Desktop and ☑ Show on Mobile. And then two more fields were added: Name and Email.

By selecting a dropdown column, you can change its format (depending on the field type chosen). If you wish to delete the column, click the Delete Column button. You will be unable to delete the RecordID column.

Dropdown Column: Sorting and Selection Criteria

Like other lists, you can set the sorting and selection criteria for the options within the dropdown.

  • Sorting: Click ⊕ Add sort criteria to set how the options in the dropdown will be sorted.

  • Selection Criteria: Click ⊕ Add a condition to set what data is shown in dropdown. For more information on how a selection criteria works, please see our article on The Criteria Builder. Although it deals with other controls, the concept is the same.

    • Example: In the below example, we don't wish for employees to show up in the Contact dropdown in the grid, so the condition is set to
      EntityType Is Not Equal to Employee.

Dropdown Column: Change Event

Enter in the actions that will occur when the user selects an option within the dropdown. 

Remember, when customizing actions, you will be able to reference data and pull data from the same row the dropdown is on. You will not be able to alter or pull in data from another row.


Special Column - Button Columns

Instead of a field, you can add a button to a column. This will allow you to execute actions using the data in the row the button is in. 

You can configure the button column by selecting it from the list of columns. Each button column will have the below options to configure.

Button Column: General

  • Header Caption: the header text shown on the Editable Grid column. This can be different than the text inside of a button and hopefully named something far more descriptive than Button1.

Button Column: Formatting

  • Width (Tablet & Desktop): set the width of the column relative to other columns, or set it with a fixed pixel size. Same as column formatting above.

  • Alignment (Tablet & Desktop): how the data is aligned within the column.

Button Column: Button

  • Button Text: Label inside of button. 

  • Load State: Default state of the button when grid is first loaded. Choose between Visible and Disabled.

  • Font Size: Size of text font inside of button.

  • Text Color: Color of text font inside of button.

  • Background Color: Color of button.

Button Column: Click Event

Enter in the actions that will occur when the button is clicked. 

Remember, when customizing actions, you will be able to pull in data via the editable grid control, but only from the row the button is on. You will not be able to alter or pull in data from another row. 

In the below example, a button column has been added, and the button pressed is on the fifth row with David Henderson as a contact.

When clicked, an Assign Value to Action Result is being run. The value assigned will be taken from the Contacts column as an action result, but only from the contact of the row the button is clicked.

So EditableGrid - Contacts will contain the value David Henderson, since that's the row the button was clicked on.


Special column - Card Columns

A card column allows you to display multiple fields in the same column.

You can configure the card column by selecting it from the list of columns. Each card column will have the below options to configure.

Card Column: General

  • Header Caption: the header text shown on the Editable Grid column.

Card Column: Formatting

  • Width (Tablet & Desktop): set the width of the column relative to other columns, or set it with a fixed pixel size. Same as column formatting above.

Card Column: Design

There are four pre-set layouts you can choose from. In each design, the first field is always bolded.

  1. Picture and six fields

  2. Picture and three fields

  3. Six fields

  4. Three fields


Grid Builder: Views

The Views area allows you filter which rows and columns are shown within the Editable Grid. 

On the left will be a list of views currently added to the Editable Grid. The view with the star (★) is the default view when a user first views the grid.

To add a view, select Add another view. To delete a view, hover over the view you want deleted, and select the trashcan icon. To set the order of the views shown in the view filter dropdown, select Reorder Views.

You can configure each view by selecting it from the list of views. Each view will have the below options to configure. 

  • General: the name of the view to be shown in the view filter drop down.

    • Set as the default View: If the view is not the default view, this button will appear to set the view as the default view.

  • Visible Columns: each view can specify which added columns are visible and which ones aren't.

  • Sorting: How the data is to be sorted within the Editable Grid. 

  • Selection Criteria: Filter what data can be shown in the Editable Grid. For more information on how a selection criteria works, please see our article on The Criteria Builder. Although it deals with other controls, the concept is the same. 

  • Duplicate View: Copy the view.

When your configuration is complete, select close to exit the Grid builder. All settings are automatically saved. 


Saving Data in the Editable Grid

As noted at the beginning of this article, data is not automatically saved when a user adds or modifies data within the Editable Grid. 

If a user were to navigate away and then come back, the data will be lost

In order to save the data on the Editable Grid, the action Save All must be executed. 

For example, you could add a button beneath the grid and label it "Update Grid". When clicked, this button could run the Save All action and save changes and/or additions to this grid. 

Did this answer your question?