Editable Grids

Allowing users to edit a grid inline

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

In the below example, the data is changed but not saved yet. 

The Editable Grid control has no automatic way to save the data. One would need to execute a Save All action (in a button, for example) to save the data in the grid.

  1. Undo Changes in Grid - This will reset the changes done in the grid.
  2. Delete - Mark the row for deletion
  3. Add Lines - Insert rows to potentially add data to the grid
  4. Undo changes in row - This will undo the changes done in the row

To use the Editable Grid control in your own customizations, you will configure it with the Editable 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 - Which table to use as well as styling of the Editable Grid
  • Columns - Which fields are used as columns in the table and how to format it for viewing
  • Views - Which views the Editable Grid will have, including visibility, sorting, and filtering

Builder: Configuration

The Editable Grid's Configuration area has two sections to configure: Data and Styling.

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. This value can be changed by the Method user while viewing the table.
  • Button label (add more rows) - the text on the button which will add more rows to insert data
  • 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.

Configuration - Styling

  • Hide View Selector - This will hide the dropdown which gives the user ability to select different filter views.
  • Add checkbox column - adds a column which allows a user to select multiple rows in the Editable Grid.
  • Show column dividers - draws a line between columns.
  • Show zebra stripes - alternates dark and light colours on the rows to help the user distinguish between them.

Builder: Columns

The Columns area allows you to add fields to the Editable Grid from the 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. 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 the below options to configure. 

Columns - General

  • Header Caption - the header text shown on the Editable Grid column.
  • Default Value - default value given to this field when edited.

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, or set it with a fixed pixel size.
  • Alignment (Tablet & Desktop) - how the data is aligned within the column.

Columns - Validation Rules

Fields can be set to check for validation. For further information, please check our article on Field Validation. Rules to check for:

  • Field is Required - data cannot be saved unless this field is populated.
  • Field Contains a Valid Email Address - data cannot be saved if inputted text isn't a valid email address.
  • Field Maximum Length - data cannot be saved if the number of characters exceeds this maximum length. 
  • Field Minimum Length - data cannot be saved if the number of characters is not at least this minimum length. 

Columns - Lose Focus Event

When a user tabs or clicks away from a field within the grid, you can run actions to when this occurs.

For example, if you would like an amount calculated based on an inputted column field, you can run actions to calculate this and populate it into another field. 

Builder: Dropdown Columns

A column which contains a dropdown field will have its own dropdown configuration.

Dropdown Column: Display Value 

A dropdown pulls data from a table. Each option within a dropdown is a record from the table.

By default, the field shown in an editable grid is the field that holds the RecordID. Rarely do you wish to show this field, as exemplified below in the Contact's column, which is a dropdown field:

You can configure the default display value to point to a more appropriate field. In our example, we would choose the ContactName instead. 

Dropdown Column: Columns

Each option listed in a dropdown can be configured to show multiple fields. In the below example, each option shows the contact name, email address, and the sales rep assigned to that contact.

The dropdown columns configuration allows you to select which fields you wish to show in the dropdown.

You can also select the format for each field in case it's a number or a date.

Dropdown Column: Sorting and Selection

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

  • Sorting - how the options in the dropdown will be sorted.
  • Selection Criteria - how the data is selected to be 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.

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 via the editable grid control, but only from the row the dropdown is on. You will not be able to alter or pull in data from another row.

Builder: 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.
  • Header Alignment (Tablet & Desktop) - Alignment of header text in column.

Button Column - Formatting

  • Width (Tablet & Desktop) - set the width of the column relative to other columns, or set it with a fixed pixel size.
  • 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.
  • 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 above example, when the button is clicked,  the value in the Name column will be assigned to an action result. The value assigned will be taken from the row the button is on.

Builder: Views

The Views area allows you filter which rows 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 - how the data is selected to 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 Editable 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. 

Was this article helpful?

Can’t find what you’re looking for?

Contact Us