Table of Contents

How to Add Inline Editing to a Grid

Lesley Updated by Lesley

Scenario

Inline editing allows users to edit fields directly from a grid, without using a form. So instead of jumping between edit forms to update different records, all changes can be made from the same page.

For example, admins of this business directory app can quickly make updates to businesses by clicking on any field on the grid they want to edit:

You’ll see that fields that are editable with inline editing will be highlighted. When clicked, a small pop-up window will show up so an update can be made.

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 watching our "Introducing Knack" video tour and then working through the articles in our Builder Basics section. Other good resources can be found in our designing the database and building pages sections of the knowledge base.

Steps

  1. 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.

  1. Open the Grid Editor

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

  1. Go to Options Section to Enable Inline Editing

Go to the Settings section when editing your grid and check the box next to “Inline Editing”:

Disable Inline Editing for Certain Fields

When inline editing is enabled, it will affect any editable fields. However, if there are fields where you don’t want to allow inline editing, you can specify that.

For example, in the grid below, all fields have inline editing enabled, but we don't want the "Business ID" field to have inline editing enabled.

To remove inline editing from that field, hover over the field column and click the edit "pencil" icon. This will take you to the Column Properties section of the editor.

From there, check the 'No' option 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, it makes any fields on the view's table available for inline editing. Non-editable fields are those whose values are 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. Non-editable fields include:

How did we do?

How to Add Connection Links to Views

Create a Print-Friendly Invoice Page

Contact