Partial Razor Pages for Grid Editing Modal Popup

[Paul]

Hello,

can you please provide a Sample for using Partial Razor Pages for Grid Create/Edit actions. I want to use my custom Pages within Modal Popups. Haven't found anything in this direction in the documentation or samples here. 

Really appreciate your help

 

Best regards

Paul

[Tsvetomir]

Hi Paul,

In general, the Kendo UI PopUp edit mode allows for rendering a partial view within its container. The configuration of the same would be as follows:

.Editable(ed => ed.Mode(GridEditMode.PopUp).TemplateName("CustomEditorTemplate"))

And the CustomEditorTemplate is a partial view added to the EditoTemplates folder of the project inside the Shared folder. A sample content could be found here:

  
@model KendoUIMVC5.Models.Person

<div class="k-edit-form-container">
    <h3>Customized Person edit template</h3>
    <br />
    @Html.HiddenFor(model => model.PersonID)

    <div class="k-edit-label">
        @Html.LabelFor(model => model.Name)
    </div>
    <div class="k-edit-field">
        @Html.EditorFor(model => model.Name)
        @Html.ValidationMessageFor(model => model.Name)
    </div>

    <div class="k-edit-label">
        @Html.LabelFor(model => model.BirthDate)
    </div>
    <div class="k-edit-field">
        @Html.Kendo().DateTimePickerFor(model => model.BirthDate)
        @Html.ValidationMessageFor(model => model.BirthDate)
    </div>
</div>

In case additional assistance is required, let me know.

 

Best regards,
Tsvetomir
Progress Telerik

[Paul]

Hi Tsvetomir,

thank you for pointing in this direction.
What if I need to implement custom validation, post logic? Can I define a page model for editor template?

Best regards
Paul

[Tsvetomir]

Hi Paul,

The editor template of the grid could be bound to a specific model. It is mandatory that it is the same model as the one used in the grid. For instance, if the grid is bound to a collection of "MyViewModel", you would have to declare the same one at the top of the editor template:

@model MyViewModel

// editor declaration 
. . . 

Note that you might have to add the Namespace in front of the model in case it is not globally added to the application:

@model SolutionName.Models.MyViewMode

// editor declaration 
. . .

I hope you find this helpful.

 

Best regards,
Tsvetomir
Progress Telerik