Use a Custom Popup Editor in Grid

Environment

Product	Telerik UI for ASP.NET MVC Grid
Product version	2025.1.227

Description

How can I customize the default Popup editor of the Grid?

Solution

The Grid provides an option for editing its data using a Popup editor. You can modify the default Popup form by using a template.

To implement a custom Popup form:

1. Declare the name of the View that holds the content of the Popup window by using the TemplateName method.

   Razor

   @(Html.Kendo().Grid<TelerikProject.Models.Customer>()
       .Name("grid")
       .Editable(e=>e.Mode(GridEditMode.PopUp).TemplateName("CustomPopUp"))
       ... // Additional configuration.
   )

2. Create the editor template View. Its name must match the one declared in the TemplateName() configuration. By default, the editor templates the Grid uses are located in the ~/Views/Shared/EditorTemplates directory. Save the new template in this directory, too.

3. Add the desired editors in the CustomPopUp View:

   Razor

       @model TelerikProject.Models.Customer
   
       @Html.Kendo().TextBoxFor(m => m.ContactName)
       @Html.Kendo().NumericTextBoxFor(m => m.Age)
       @Html.Kendo().TextBoxFor(m => m.Country)

For a complete example, refer to the project on how to customize the Popup editor of the Grid when its editing mode is set to PopUp.

More ASP.NET MVC Grid Resources

• ASP.NET MVC Grid Documentation
• ASP.NET MVC Grid Demos
• ASP.NET MVC Grid Product Page
• Telerik UI for ASP.NET MVC Video Onboarding Course (Free for trial users and license holders)
• Telerik UI for ASP.NET MVC Forums

See Also

• Client-Side API Reference of the Grid for ASP.NET MVC
• Server-Side API Reference of the Grid for ASP.NET MVC
• Telerik UI for ASP.NET MVC Knowledge Base