Add/Edit records in a popup window

[Mohamed]

Hello,
I just start to use Telerik UI for core in razor pages project
I have a grid holding some records. I would like to create a custom popup for new and edit records.
The functionality for the add and edit records exist in a view component.
The booking issues for me are
How to use the view component with a popup window.
After successful saving, how to close the popup window to set the focus to the grid.
Appreciate your help, preferable with sample code.

[Ivan Danchev]

Hello Mohamed,

To use a custom popup editor the Grid's Editable configuration must be set like this:

.Editable(e=>e.Mode(GridEditMode.PopUp).TemplateName("MyPopup"))

Where "MyPopup" is the name of the view with the custom editor's content. The Grid will look for it in \Pages\Shared\EditorTemplates

The editor is a view not a ViewComponent. That said I was able to load a ViewComponent in it:

@await Component.InvokeAsync("MyViewComponent");

Attached you can find a sample project that demonstrates this. In it a DropDownList is initialized in the GridView that the ViewComponent loads. It can be used to edit the Grid's ShipCity column.

I hope this points you in the right direction with regard to implementing the desired custom editor.

Regards,
Ivan Danchev
Progress Telerik

[Headygains]

So if I wanted to create a template for the grid "edit" popup i would have to put it in a "\Pages" directory? 

Is there a way to change the grid to target the "\Views" directory instead?

Can i change the popup dynamically for the Create vs Edit pop-up?

[Ivan Danchev]

Hello Dalton,

The mentioned path is valid for Razor Pages ASP.NET Core applications, which normally don't contain a View folder. If your ASP.NET Core application uses the MVC pattern and has views and controllers the default path would be either: 

1. ~/Views/Home/EditorTemplates where "Home" is just an exemplary controller name, so it can be substituted with a different controller name

or

2. ~/Views/Shared/EditorTemplates

As for changing the popup template, there is a way to that:

<script>
    $(function () {
        var grid = $('#grid').data('kendoGrid');
        var options = grid.options;
        options.autoBind = true;
        options.toolbar = [{ name: "create" }]
        options.editable.template = $("#template-edit").html()
        grid.setOptions(options);
    })
</script>
//template

<script type="text/x-kendo-template" id="template-edit">
    #if(data.isNew()) {#
    #var createTemp = kendo.template($("\#createTemplate").html());#
    #=createTemp(data)#
    #} else {#
    #var editTemp = kendo.template($("\#editTemplate").html());#
    #=editTemp(data)#
    #}#
</script>

<script type="text/x-kendo-template" id="createTemplate">
    @Html.Partial("CreateTemplate")
</script>

<script type="text/x-kendo-template" id="editTemplate">
    @Html.Partial("EditTemplate")
</script>

It involves setting a template (#template-edit) programmatically on page load, then in the template executing conditional logic that will load another template based on whether an existing record is edited or a new one has been added. These two different templates are "#editTemplate" and "#createTemplate" respectively, and they render the actual partial views with the popup editor's content.

Regards,
Ivan Danchev
Progress Telerik

[Headygains]

Wow. You're the real MVP. Thank you so much.

[Ivan Danchev]

Dalton,

I am glad I was able to help.

Regards,
Ivan Danchev
Progress Telerik