Popup Form Template

Updated on Aug 31, 2026

With the FormTemplate feature, you can customize the appearance and content of the create/edit Popup window of the Grid.

In this article:

• Using the Popup Form Template
• Specifics
• Example

Using the Popup Form Template

1. Declare the desired custom content inside the <FormTemplate> inner tag of the <GridPopupEditFormSettings>. For example, TelerikForm or EditForm.
2. The FormTemplate provides a context of type GridPopupEditFormTemplateContext. It contains a clone of the Grid data item in its Item property, and reveals if the user is adding a new item or editing an existing one through its IsNew boolean property. Cast context.Item to your model type, so you can pass it to the custom form.
3. (optional) Use the Context attribute of the <FormTemplate> tag to set the name of the context variable.

Specifics

When using the template, the built-in popup form is replaced by the declared content in the FormTemplate tag. This introduces the following specifics:

• The default Update and Cancel buttons are removed. This means that the OnUpdate and OnCancel events do not fire. The only exception is that OnCancel fires when the user presses ESC or clicks the Close button in the popup Window header. To detect or cancel the update of a record, you need to include custom events to manage these actions.
• There are two ways to define custom Form buttons:
  • Use the Form <FormButtons> template.
  • Use the Grid <ButtonsTemplate>, which is empty by default when using a <FormTemplate>. Remove the duplicate built-in Form Submit button with an empty <FormButtons> template.
• If you leave the Grid popup footer (<ButtonsTemplate>) empty, it takes up space in the popup. You can remove this empty popup footer space with CSS.
• The FormTemplate disables the built-in validation of the Grid. Implement a Form Validation instead.
• The <GridPopupEditFormSettings> parameters do not apply to a custom TelerikForm that you may render inside the <FormTemplate> tag. Set the desired Form configurations such as Columns, Orientation, and more on the Form component.

Example

Using a FormTemplate to modify the Edit/Create Popup window.

Example

View Source

Loading ...

See Also

• Grid Popup Buttons Template
• Live Demo: Grid Templates
• Live Demo: Grid Popup Edit Form Template
• Blazor Grid