> For the complete documentation index, see [llms.txt](https://interfacing.gitbook.io/interfacing-help-files/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://interfacing.gitbook.io/interfacing-help-files/end-users/exploring-apps/working-with-forms/working-with-grids.md).

# Working with Grids

View, edit, and manage data in grids.

A **grid** presents data in rows and columns and may allow you to view, add, edit, or delete items, depending on its configuration.

{% hint style="info" %}

#### Types of Grids

Grids can be categorized into **two main types**:

1. **Browse Grids (Read-Only)**
   * Allow you to view and navigate data only.
   * Adding, editing, or deleting items is not supported.
2. **Update Grids**
   * Allow you to view, add, edit, or delete items.
   * Update grids are further divided into:
     * **Inline Edit Grids** – Make changes directly within the grid
     * **Modal Form Grids** – Use a separate form for adding or editing items
       {% endhint %}

***

## Using Inline Edit Grids

Inline grids allow you to add, edit, or delete items directly within the grid.

<p align="center"><kbd><strong>IMAGE</strong></kbd></p>

{% stepper %}
{% step %}

### Adding Items Inline

To add a new item:

* Select **Add**.
* A new row appears in the grid.
* Enter the required information directly in the row.

To save your changes:

* Select **Save Changes**, or
* Click outside the grid.

To cancel, select **Discard Changes**.

{% hint style="success" %}
**Tip:** You can add multiple rows before saving.
{% endhint %}

***

{% endstep %}

{% step %}

### Editing Items Inline

To edit an existing item:

* Click inside an editable cell.
  * Editable cells are highlighted when you hover over them.
* Update the value as needed.

To save your changes:

* Select **Save Changes**, or
* Click outside the grid.

To cancel, select **Discard Changes**.

{% hint style="success" %}
**Tip:** You can edit multiple rows or cells before saving.
{% endhint %}

***

{% endstep %}

{% step %}

### Deleting Items Inline

To delete an item:

* Select the **Delete** icon for the row.
* The row is marked for deletion.

To confirm, select **Save Changes**.

To cancel, select **Discard Changes** or **Undo** ( <i class="fa-rotate-left">:rotate-left:</i> ).

{% hint style="success" %}
**Tip:** You can delete multiple rows at once before confirming.
{% endhint %}

***

{% endstep %}
{% endstepper %}

{% hint style="info" %}

#### Saving or Discarding Changes

When inline editing is enabled:

* **Save Changes** and **Discard Changes** buttons are always visible.
* The buttons become active when you make changes.
* Once changes are saved or discarded, the buttons are disabled again.
  {% endhint %}

***

## Using Modal Form Grids

Some grids use separate forms (modal windows) to add, edit, or view items.

<p align="center"><kbd><strong>IMAGE</strong></kbd></p>

{% stepper %}
{% step %}

### Adding Items Using a Form

To add an item:

* Select **Add**.
* A form opens in a pop-up window.
* Enter the required information.
* Choose one of the following:
  * **Save and New** to save and add another item
  * **Save and Close** to save and return to the grid
* The new item appears in the grid after saving.

***

{% endstep %}

{% step %}

### Editing Items Using a Form

To edit an item:

* Select the **Edit** ( <i class="fa-pencil">:pencil:</i> ) icon or double-click the row.
* The form opens with existing information.
* Update the fields as needed.
* Use the navigation buttons to move between items:

  * **Save and Next** – saves the current item and opens the next item.
  * **Save and Close** – saves the current item and closes the form.
  * **Save and Previous** – saves the current item and opens the previous item.

  <div data-gb-custom-block data-tag="hint" data-style="info" class="hint hint-info"><p><strong>Previous</strong> or <strong>Next</strong> buttons may not appear if you are at the first or last item.</p></div>
* Changes are saved automatically when navigating between items, but any validation errors will prompt a warning.

***

{% endstep %}

{% step %}

### Viewing Items

To view an item:

* Select the **View** ( <i class="fa-eye">:eye:</i> ) icon to open an item in read-only mode.

***

{% endstep %}
{% endstepper %}

***

## Exporting Data to Excel

You can export the contents of a grid to an Excel file.

#### <i class="fa-arrow-up-from-line">:arrow-up-from-line:</i>  Exporting Grid Data

1. Select the **Export to Excel** icon in the top-right corner of the grid.
2. An Excel (.xlsx) file is downloaded automatically.
   * The exported file reflects the current grid view, including filters, sorting, and visible columns.

{% hint style="info" %}
If no data is available to export, a message is displayed.
{% endhint %}

***


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter:

```
GET https://interfacing.gitbook.io/interfacing-help-files/end-users/exploring-apps/working-with-forms/working-with-grids.md?ask=<question>&goal=<endgoal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.