New to Telerik UI for ASP.NET MVC? Download free 30-day trial

Customize the Popup Editors in the Grid

The Grid provides an option for editing its data in a popup. You can modify the popup window by using templates.

To customize it the popup editor:

  1. Declare the name of the file that will render the content of the popup window by using the TemplateName extension method.

    @(Html.Kendo().Grid<TelerikProject.Models.Customer>()
        .Name("grid")
        .Editable(e=>e.Mode(GridEditMode.PopUp).TemplateName("CustomPopUp"))
        ...
    
  2. Create the editor template file. Its name must match the one declared in the TemplateName() configuration. By default, the editor templates that the Grid is using are located in the ~/Views/Shared/EditorTemplates directory. Save the new template in this directory too.

  3. Implement the new editor template.

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

For a full example, refer to the project on how to customize the popup editor of the Kendo UI Grid when the mode is configured to popup.

See Also

In this article