Close the Kendo Window(partial view) on button click within the Kendo Window

Question

I have a view "TestView1.cshtml" inside which I have a Kendo Window Control which is defined by the following code.

 @(Html.Kendo()
    .Window()
    .Name("TestView1Window")
    .Title("About Kendo")
    .Content(@Html.RenderPartial(~/Views/PartialViews/TestPartialView2.cshtml))
     .Draggable()
     .Resizable()
     .Width(600)
    .Actions(actions => actions.Pin().Minimize().Maximize().Close())
    .Events(ev => ev.Close("onClose"))
    .Render();
    )

I am opening this window with the help of a button in TestView1.cshtml.

<span id="undo" style="display:none" class="k-button">Click here to open the window.</span>

Now when the window loads the partial view "TestPartialView2" is rendered which contains a Kendo button control which is defined by the following code:-

@(Html.Kendo()
.Button()
.Name("CloseKendoWindow").
.HtmlAttributes(new {@class="Test2",style="font-size:15px;"})
)

Now I want to close the partial view "TestPartialView2.cshtml" on "CloseKendoWindow" button click and make sure the rest of the TestView1 view is intact, the way it was when it was loaded.

Basically, I want a jQuery solution to close the Kendo Window control in the TestView1 on click of a button which is present on TestPartialView2.cshtml.

If any doubts on what I am trying to achieve here, then please leave a comment.

Answer 1

I am not familiar with telerik controls but u can try via the jQuery code below:

$(document).ready(function () {
        var wnd = $("#window").data("kendoWindow");


        $("#closebtnId").click(function(e) {
            wnd.close();
        });
    });

update

can u try this

$(#yourbutton).closest(".k-window-content").data("kendoWindow").close();

*replace yourbutton with button name.

or this one

 $(document).ready(function () {
        $('#nameOfYourWindow').data().kendoWindow.bind('refresh', function(e) {
            var win = this;
            $('#btnClose').click(function() {
                win.close();
            });
        });
    });