# Popup Form Template

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

> caption In this article:

* [Using the Popup Form Template](https://www.telerik.com/blazor-ui/documentation/components/grid/templates/popup-form-template#using-the-popup-form-template)
* [Specifics](https://www.telerik.com/blazor-ui/documentation/components/grid/templates/popup-form-template#specifics)
* [Example](https://www.telerik.com/blazor-ui/documentation/components/grid/templates/popup-form-template#example)

## Using the Popup Form Template

1. Declare the desired custom content inside the `<FormTemplate>` inner tag of the `<GridPopupEditFormSettings>`. For example, [`TelerikForm`](https://www.telerik.com/blazor-ui/documentation/components/form/overview) or [`EditForm`](https://learn.microsoft.com/en-us/aspnet/core/blazor/forms/).
2. The `FormTemplate` provides a `context` of type [`GridPopupEditFormTemplateContext`](https://www.telerik.com/blazor-ui/documentation/api/telerik.blazor.components.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`](https://www.telerik.com/blazor-ui/documentation/components/grid/editing/overview#events) 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](https://www.telerik.com/blazor-ui/documentation/knowledge-base/grid-handle-empty-popup-footer):
  * Use the [Form `<FormButtons>` template](https://www.telerik.com/blazor-ui/documentation/components/form/formitems/buttons).
  * Use the [Grid `<ButtonsTemplate>`](https://www.telerik.com/blazor-ui/documentation/components/grid/templates/popup-buttons-template), which is empty by default when using a `<FormTemplate>`. Remove the duplicate [built-in Form Submit button with an empty `<FormButtons>` template](https://www.telerik.com/blazor-ui/documentation/components/form/formitems/buttons).
* 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](https://www.telerik.com/blazor-ui/documentation/knowledge-base/grid-handle-empty-popup-footer).
* The `FormTemplate` disables the [built-in validation](https://www.telerik.com/blazor-ui/documentation/components/grid/editing/validation) of the Grid. Implement a [Form Validation](https://www.telerik.com/blazor-ui/documentation/components/form/validation) instead.
* The [`<GridPopupEditFormSettings>` parameters](https://www.telerik.com/blazor-ui/documentation/components/grid/editing/popup#form-layout) 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](https://www.telerik.com/blazor-ui/documentation/components/form/overview#form-parameters).

## Example

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

<demo metaUrl="client/grid/templates-popup-form/" height="700"></demo>

## See Also

* [Grid Popup Buttons Template](https://www.telerik.com/blazor-ui/documentation/components/grid/templates/popup-buttons-template)
* [Live Demo: Grid Templates](https://demos.telerik.com/blazor-ui/grid/templates)
* [Live Demo: Grid Popup Edit Form Template](https://demos.telerik.com/blazor-ui/grid/popup-edit-form-template)
* [Blazor Grid](https://www.telerik.com/blazor-ui/documentation/components/grid/overview)