How do I open a Razor Page in a Kendo Window?

[Craig]

Hi,

I have been using UI for ASP.NET AJAX for over 10 years and have used the radWindow to display a page containing a details, create or edit form as follows:

window.radopen("rw/Project.aspx?Id=" + id + "&pt=" + projecttype, "PopUpWin1");

 

Having finally made the leap to Razor Pages, I cannot see how to adopt this technique using UI for ASP.NET Core. I can see that you have integrated Grid and Window  create and edit functionality but, in this case, I cannot use a Telerik Grid and have to use an existing custom control with a table in it to render the data rows in a foreach loop. If it's possible, I'd prefer to keep this Razor Pages than MVC for a number of reasons. Please let me know if you need any further information.

 

Many Thanks,

Craig

[Aleksandar]

Hello Craig,

I assume you have the Kendo window instantiated is that correct? In this scenario you can get a reference to the Window. The Window widget exposes a refresh method that allows you to pass a url that will be loaded as Window content. You can use the Url.Page method to generate the url to the Razor Page.

UPDATE:

Setting the url in the refresh method defines the url that is expected to return an HTML fragment that will be loaded in the content area of the Window. To return a HTML fragment in ASP.NET Core a partial view can be used. URL generation in RazorPages is explained in details here.

Attached is a sample application with a HTML table, with Ids in one column and Details button in the other. Clicking on the button passes the id to the remote endpoint and the details page is returned with the respective details:

        public IActionResult OnGetDetails(string userId) 
        {
            ViewData["userId"] = userId;
            return new PartialViewResult()
            {
                ViewName = "Details",
                ViewData = ViewData,
            };
        }

@(Html.Kendo().Window()
    .Name("window")
    .Title("Details")
    .Visible(false)
    .Actions(actions => actions
        .Minimize()
        .Maximize()
        .Close()
    )
    .Draggable()
    .Resizable()
    .Width(600)
)

<script>
    function showDetails() {

        var win = $("#window").data("kendoWindow");
        var id = $(event.target).closest("tr").find(".myClass")[0].innerText
        win.refresh({
            url: "@Url.Page("Index","Details")",
            data: {userId:id}
        });
        win.open();
    }
</script>

Regards,
Aleksandar
Progress Telerik

[Craig]

Hello Aleksandar,

Yes, I have instantiated the Window thus:

    @(Html.Kendo().Window()
    .Name("window")
    .Title("Event Details")
    .Visible(false)
    .Actions(actions => actions
            .Close()
            )
    .Width(380)
    .Height(400)
    .Draggable(true)
    .Modal(true)
    )

...and I am trying to open it from an "Info" button in each row of a table like this:

<i class="btn btn-outline-info" title="Info" onclick='$("#window").data("kendoWindow").refresh({ url: "@Url.Page("/Details")", data: { id: "@item.Id" }).center().open();'>Info</i>

...based on your suggested method, but nothing happens! I think I must be missing something fundamental here but I can't find it. The table is in an Index Razor Page which otherwise works perfectly and I know the Details Razor Page works in the browser window but I cannot get the Kendo Window to open it.

Can you see what I'm doing wrong?

Thanks,

Craig

[Aleksandar]

I have updated the initial response based on the discussion in the support thread on the same topic