ASP.NET MVC Data Management Grid How To Editing Use Custom Popup Editors

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

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:

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

Razor

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

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.

Implement the new editor template.

CustomPopUp.cshtml

    @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.

Customize the Popup Editors in the Grid

See Also