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:
-
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. )
-
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. -
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