How to Add Inline-Editing to a Grid

This article will guide you through the process of implementing inline-editing to your Grid views, allowing users to effortlessly make changes to record values directly from the Live App.

Scenario

Inline editing enables users to conveniently modify fields directly from a grid, eliminating the need for navigating through different edit forms to update various records. With this feature, all changes can effortlessly be made from a single page.

For example, administrators of this business directory application can efficiently update businesses by simply clicking on any desired field within the grid for editing:

Users will notice that editable fields are highlighted when using inline editing. By clicking on these fields, a small pop-up window will appear, allowing them to easily make updates.

Requirements

If this your first time creating an app, you'll need to know some basics about adding tables, fields, pages, and views. You can start by working through the articles in our Builder Basics section.

Other good resources can be found in our About Your Database and Working With Pages sections of the knowledge base.

Steps

Select the Page with the Grid:

In the Pages section of the builder, select the page that holds the grid you want to add inline editing to.

Click on the grid on that page to open the editor.

Go to Settings section when editing your Grid and check the box next to "Inline editing".

Disable Inline Editing for Certain Fields

If you wish to restrict inline editing for specific fields, you have the option to do so. While enabling inline editing affects all editable fields, you can specify which fields should not allow this feature.

As an example, all fields in the grid below have inline editing enabled, but we would like to disable inline editing for the "Name" field:

To disable inline editing for that field, simply hover over the field column and click on the edit "pencil" icon. This action will redirect you to the Column Properties section of the editor.

From there, check the box for "No" under "Allow Inline Editing".

That process can be repeated for any fields that shouldn’t have inline editing enabled.

Non-Editable Fields

When inline editing is enabled, all fields on the view's table become editable. However, there are certain fields that cannot be edited as their values are automatically generated by your app or a connected table's field values.

For example, auto increment fields are automatically populated by your app with a unique value. Auto increment values cannot be edited. 

Non-editable fields include:

• Auto increment
• Formulas
• Equations
• Text formulas
• Fields with conditional rules