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.
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:
The Editable Grid's Configuration area has two sections to configure: Data and Styling.
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.
Fields can be set to check for validation. For further information, please check our article on Field Validation. Rules to check for:
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.
A column which contains a dropdown field will have its own dropdown configuration.
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.
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.
Like other lists, you can set the sorting and selection criteria for the options within the dropdown.
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.
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.
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.
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.
When your configuration is complete, select close to exit the Editable Grid builder. All settings are automatically saved.
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.