New to Telerik UI for ASP.NET MVCStart a free 30-day trial

Use a Custom Popup Editor in Grid

Environment

ProductTelerik UI for ASP.NET MVC Grid
Product version2025.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

See Also