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:
Filter views: Click the dropdown to filter the grid with set views.
Search the grid: Search the visible fields in the grids. Any hidden columns will not be included in the search.
Grid Chips: Clicking will open up an area above the grid where you can add 'chips' to filter the list. These chips represent different criteria the visible records need to adhere to.
Sort: Clicking this icon will allow you to sort the grid by the column of your choice.
Other options: Clicking this will show a menu allowing you to:
Refresh: This will reset any changes done in the grid.
Export: Export data in the grid as a CSV.
Delete: Mark the row for deletion.Add Lines: Insert rows to potentially add data to the grid.
Total Records: Clicking many will show the total number of records in the grid.
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 features are visible on the editable grid.
- Hide view selector: If there are different filter views, you can hide the filter view dropdown. If there is only one filter view, this is hidden by default.
- Show sorting: Show or hide the sort icon.
- Show search bar: Show or hide the search bar.
- Show refresh: Show or hide the refresh option in Other options menu.
- Show export button: Show or hide the export option in Other options menu.
- Add checkbox column: This will show or hide a checkbox column on the left of the grid to allow the user to select multiple records.
- Allow user to reorder columns: This allows the user to hover over a column header (showing an
icon) allowing them to temporarily reposition the columns in the 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.
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.
Picture and six fields
Picture and three fields
Six fields
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.