MVC: When using Kendo().Window to load PartialView

I'm using modal Kendo().Window() to load a Partial View on a button click.

I have a main View, let's say View1 containing the button, the code to display a window where the Partial View containing the Kendo().Grid will be loaded, and a javascript function which opens the window:

This is what I have on my View1:

This is the button:

@(Html.Kendo().Button()
            .Name("btnSubmit")
            .HtmlAttributes(new { type = "button"})
            .Icon("k-icon k-i-file-txt")
            .Content("View Details")
            .Events(e => e.Click("DisplayDetailedView"))
)

This is a window to display a content of a PartialView:

@(Html.Kendo().Window()
            .Name("ReportData")
            .Title("Details Report")
            .LoadContentFrom("RedirectToView", "MyController")
            .Modal(true)
            .Visible(false)
            .Width(800)
            .Height(375)
            .Position(p => p.Top(100).Left(800))
)

And this is a javascript function to open a window:

function DisplayDetailedView() {
    var w = $("#ReportData").data("kendoWindow");
    w.open();
}

My Partial View has a Kendo().Grid that calls a method from a controller to get populated with a data:

@(Html.Kendo().Grid(Model.Report)
  .......
  .DataSource(ds => ds
      .Ajax()
      .Read(read => read.Action("GetReport","MyController", Model))

)

When I'm loading View1, the method that is supposed to be called on Grid initialization, gets called and I'm getting the error saying"

"The resource cannot be found.

HTTP 404. The resource you are looking for (or one of its dependencies) could have been removed, had its name changed, or is temporarily unavailable. Please review the following URL and make sure that it is spelled correctly.

Requested URL:/MyController/GetReport"

Looks like, the page is trying to render my Kendo().Window, calls RedirectToView in controller from .LoadContentFrom event of the window to redirect to my Partial View with the Grid

The functionality used to work with bootstrap modal approach, when I did not use Kendo().Window inside of the View1, but used an Ajax call on the button click that called RedirectToViewmethod:

function ShowReversalsDetailedView() {
    $.ajax(
        {
            url: "/MyController/RedirectToView/",
            type: 'post',
            dataType: "html",
            contentType: 'application/json; charset=utf-8',
            success: function (result) {
                $(".modal-content").html(result);
            }
        })
}

However, I need to change it to a Kendo().Window()

How can I fix it?

First, RedirectToView should be returning a partial view - not redirecting to it.

Assuming that is the case, try loading your content when you open your window. So first, remove .LoadContentFrom("RedirectToView", "MyController") from the window declaration.

Then in your javascript function:

function DisplayDetailedView() {
    var w = $("#ReportData").data("kendoWindow");
    w.refresh({
        url: '@Url.Action("RedirectToView", "MyController")'
    });
    w.open();
}

I would also change your ajax call to use @Url.Action. I am confused though why you would be calling RedirectToView here? Is it a POST or is it returning a partial or is it redirecting? Redirecting would be bad - you need to do that client side.

function ShowReversalsDetailedView() {
    $.ajax(
        {
            url: '@Url.Action("RedirectToView", "MyController")',
            type: 'post',
            dataType: "html",
            contentType: 'application/json; charset=utf-8',
            success: function (result) {
                $(".modal-content").html(result);
            }
        })
}

See https://docs.telerik.com/kendo-ui/api/javascript/ui/window/methods/refresh