# Grid Popup Editing

Grid popup editing allows the app to render a larger form with customizable dimensions and layout. The popup edit mode is also more suitable for mobile devices with small screens. The popup edit form may contain editable fields from hidden columns in the Grid table.

> Make sure to read the [Grid CRUD Operations](https://www.telerik.com/blazor-ui/documentation/components/grid/editing/overview) article first.

## Basics

To use popup Grid editing, set the Grid `EditMode` parameter to `GridEditMode.Popup`. During popup editing, only one table row is in edit mode. The user can:

* Press **Tab** or **Shift** + **Tab** to focus the next or previous input component.
* Click the **Save** command button to confirm the current row changes and exit edit mode.
* Click the **Cancel** command button or press **ESC** to cancel the current row changes and exit edit mode.

The popup edit mode can display a [Telerik Validation Summary component](https://www.telerik.com/blazor-ui/documentation/components/validation/summary) if the Grid model is configured for validation.

## Commands

Popup add, edit, and delete operations use the following [command buttons](https://www.telerik.com/blazor-ui/documentation/components/grid/editing/overview#commands):

* **Add**
* **Delete**
* **Edit**

Without using the above command buttons, the application can:

* [Manage add or edit mode programmatically](https://www.telerik.com/blazor-ui/documentation/knowledge-base/grid-add-edit-state) through the [Grid state](https://www.telerik.com/blazor-ui/documentation/components/grid/state).
* Modify data items directly in the Grid data source. [Rebind the Grid](https://www.telerik.com/blazor-ui/documentation/common-features/data-binding/overview#refresh-data) afterwards.

Popup edit mode does not use **Save** and **Cancel** command buttons in the [Grid command column](https://www.telerik.com/blazor-ui/documentation/components/grid/columns/command). The Grid renders them automatically in the popup, unless you define a [Buttons Template](https://www.telerik.com/blazor-ui/documentation/components/grid/templates/popup-buttons-template) or a [Form Template](https://www.telerik.com/blazor-ui/documentation/components/grid/templates/popup-form-template).

In popup edit mode, the Grid commands execute row by row and the corresponding [Grid events](https://www.telerik.com/blazor-ui/documentation/components/grid/editing/overview#events) also fire row by row.

## Customization

The Grid exposes options to customize the edit popup and its form. Define the desired configuration in the `GridPopupEditSettings` and `GridPopupEditFormSettings` tags under the `GridSettings` tag.

### Edit Hidden Columns

Starting with version 7.0, the Grid allows users to edit [hidden columns](https://www.telerik.com/blazor-ui/documentation/components/grid/columns/visible) by default. To disable editing of a hidden column, set `Editable="false"` to the respective `<GridColumn>` tag to make it read-only.

### Popup Settings

The `GridPopupEditSettings` nested tag exposes the following parameters to allow popup customization:

<style>
    .article table {
        table-layout: auto;
        word-break: normal;
    }
</style>

| Parameter   | Type     | Description                      |
| ----------- | -------- | -------------------------------- |
| `Class`     | `string` | The CSS class of the edit popup  |
| `Title`     | `string` | The title of the edit popup      |
| `Width`     | `string` | The Width of the edit popup      |
| `MaxWidth`  | `string` | The maximum width of the window  |
| `MinWidth`  | `string` | The minimum width of the window  |
| `Height`    | `string` | The height of edit popup         |
| `MaxHeight` | `string` | The maximum height of the window |
| `MinHeight` | `string` | The minimum height of the window |

> tip The min/max options for the width and height apply to the initial rendering of the window and not browser resizing.

For example, here is [how to set the Grid popup edit form's title, so that it matches a property value of the edited data item](https://www.telerik.com/blazor-ui/documentation/knowledge-base/grid-popup-edit-title).

### Form Layout

The `GridPopupEditFormSettings` nested tag exposes the following parameters to allow edit form customization:

| Parameter       | Type and Default Value               | Description                                                                                                                                               |
| --------------- | ------------------------------------ | --------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `ButtonsLayout` | `FormButtonsLayout` <br/> (`End`)    | The horizontal alignment of the buttons. Takes a member of the `FormButtonsLayout` enum: <br/> - `Start` <br/> - `End` <br/> - `Center` <br/> - `Stretch` |
| `Columns`       | `int`                                | The number of the form columns                                                                                                                            |
| `ColumnSpacing` | `int`                                | The column spacing                                                                                                                                        |
| `Orientation`   | `FormOrientation` <br/> (`Vertical`) | The orientation of the form. Takes a member of the `FormOrientation` enum: <br/> - `Horizontal` <br/> - `Vertical`                                        |

> important These settings are not applicable if you are using a [`<FormTemplate>` with a standalone Form component](https://www.telerik.com/blazor-ui/documentation/components/grid/templates/popup-form-template).

### Form Template

In the `GridPopupEditFormSettings`, you can declare a `FormTemplate`. This template enables you to fully customize the appearance and content of the create/edit Popup window in the Grid. For more information and examples on customizing the Grid Popup window, refer to the [Popup Form Template](https://www.telerik.com/blazor-ui/documentation/components/grid/templates/popup-form-template) article.

### Buttons Template

You can specify a `ButtonsTemplate` in the `GridPopupEditFormSettings` to customize how the buttons look in the create/edit Popup window of the Grid. To learn more and see an example of customizing the Grid Popup buttons, refer to the [Popup Buttons Template](https://www.telerik.com/blazor-ui/documentation/components/grid/templates/popup-buttons-template) article.

## Examples

### Basic

The example below shows how to:

* Implement popup Grid CRUD operations with the simplest and minimal required setup.
* Use the `OnCreate`, `OnDelete` and `OnUpdate` events to make changes to the Grid data source. Item deletion relies on **Delete** command buttons and the `OnDelete` handler receives one data item in its event argument. [When using the `GridToolBarDeleteTool`](https://www.telerik.com/blazor-ui/documentation/components/grid/toolbar#toolbar-tools-configuration) with multiple [row selection](https://www.telerik.com/blazor-ui/documentation/components/grid/selection/rows), the `OnDelete` handler may receive multiple data items for deletion.
* Rebind the Grid automatically through the `OnRead` event after the create, delete, or update operation is complete. When [using the `Data` parameter, you must either query the data source again, or modify the local `Data` collection manually](https://www.telerik.com/blazor-ui/documentation/components/grid/editing/popup#advanced).
* Use `DataAnnotations` validation for some model class properties.

> caption Basic Grid popup editing configuration

<demo metaUrl="client/grid/editing-popup-basic/" height="600"></demo>

### Advanced

The example below shows how to:

* Implement popup Grid CRUD operations with all available events and various built-in customizations.
* Use the `OnCreate`, `OnDelete` and `OnUpdate` events to make changes to the Grid data source. Item deletion relies on **Delete** command buttons and the `OnDelete` handler receives one data item in its event argument. [When using the `GridToolBarDeleteTool`](https://www.telerik.com/blazor-ui/documentation/components/grid/toolbar#toolbar-tools-configuration) with multiple [row selection](https://www.telerik.com/blazor-ui/documentation/components/grid/selection/rows), the `OnDelete` handler may receive multiple data items for deletion.
* Use the `OnModelInit` event to provide [model instances](https://www.telerik.com/blazor-ui/documentation/components/grid/editing/overview#item-instances) with some default values before add and edit operations start.
* Use the `OnAdd` event to provide some default values before add operations start.
* Use the `NewRowPosition` parameter to set there new rows are added to the existing data.
* Reload the Grid `Data` after making changes to the data source. When [using the Grid `OnRead` event, the component will fire `OnRead` and rebind automatically](https://www.telerik.com/blazor-ui/documentation/components/grid/editing/popup#basic).
* Apply the user changes to the Grid `Data` parameter to spare one read request to the database.
* Use `DataAnnotations` validation for the `Name` and `ReleaseDate` properties.
* Define the `Id` column as readonly with `Editable="false"`.
* Customize the `Description` and `Discontinued` column editors without using an `EditorTemplate`.
* Render the **Delete** command button conditionally if `Discontinued` is `true`.
* Confirm **Delete** commands with the built-in Grid Dialog. You can also [intercept item deletion with a separate Dialog or a custom popup](https://www.telerik.com/blazor-ui/documentation/knowledge-base/grid-customize-delete-confirmation-dialog).
* Cancel the `OnAdd` and `OnEdit` events conditionally, so that the Grid does not go into edit mode.
* Cancel the `OnCancel` event conditionally, so that the Grid remains in edit mode and the user doesn't lose their unsaved changes.
* Edit the `Description` column that is not visible in the Grid.
* Customize the popup edit form dimensions and layout.

> caption Advanced Grid popup editing configuration

<demo metaUrl="client/grid/editing-popup-advanced/" height="600"></demo>

## See Also

* [Live Demo: Grid Popup Editing](https://demos.telerik.com/blazor-ui/grid/editing-popup)
* [Grid Editor Template](https://www.telerik.com/blazor-ui/documentation/components/grid/templates/editor)
* [Start and End Editing through the Grid State](https://www.telerik.com/blazor-ui/documentation/knowledge-base/grid-add-edit-state)
* [Blazor Grid](https://www.telerik.com/blazor-ui/documentation/components/grid/overview)