Blazor Grid Editing Popup Editing - Telerik UI for Blazor

New to Telerik UI for Blazor? Start a free 30-day trial

Updated on Aug 28, 2026

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 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 if the Grid model is configured for validation.

Commands

Popup add, edit, and delete operations use the following command buttons:

Add
Delete
Edit

Without using the above command buttons, the application can:

Manage add or edit mode programmatically through the Grid state.
Modify data items directly in the Grid data source. Rebind the Grid afterwards.

Popup edit mode does not use Save and Cancel command buttons in the Grid command column. The Grid renders them automatically in the popup, unless you define a Buttons Template or a Form Template.

In popup edit mode, the Grid commands execute row by row and the corresponding Grid 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 by default. To disable editing of a hidden column, set Editable="false" to the respective <GridColumn> tag to make it read-only.

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

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

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.

Form Layout

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

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

These settings are not applicable if you are using a <FormTemplate> with a standalone Form component.

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 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 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 with multiple row selection, 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.
Use DataAnnotations validation for some model class properties.

Basic Grid popup editing configuration

Loading ...

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 with multiple row selection, the OnDelete handler may receive multiple data items for deletion.
Use the OnModelInit event to provide model 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.
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.
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.

Advanced Grid popup editing configuration

Loading ...