How to load a View as Kendo Window popup on Button Click Event

Question

I am trying to load a view in a kendo window only on click button’s event. Actually, the popup is displayed each time on the load of the base page. I want that that popup loads only on the click event of the button.

Am I missing something? I've also added onclick event in the html button and called openWindow() javascript method. But it didn't work either, apparently something is wrong.

Is it possible to put the server code of kendo Window below in a jquery function? If yes, how?

<% Html.Kendo().Window()
      .Name("partListGridWindow")
      .Width(800)
.......
%>

Here is my code JQuery:

$(document).ready(function () {
   $("#partListLink")
        .bind("click", function () {
            $("#partListGridWindow").data("kendoWindow").open().center();
        });
});

The kendo Window: In the LoadContentFrom I call PartList which is the Action Name that return my View, from Claim Controller.

<% Html.Kendo().Window()
               .Name("partListGridWindow")
               .Width(800)
               .Modal(true)
               .Title("Part List Info")
               .Content("Loading Part List Info...")
               .LoadContentFrom("PartList", "Claim", Model)
                //.Visible(false)
               .Draggable()
               .Resizable()
               .Render();
%>

Here is the html button:

<a id="partListLink" class="k-button" onclick=openWindow()></a>

By the way, I saw on the Telerik forum they recommend this formula to hide the window with Visible = false but it should be a way to bypass the load of those windows at the beginning of the base page load.

What to do in the case there are tens or more of popup windows to load?

Any help is greatly appreciated! Thank you so much for ur help!

Solution 1

If your Kendo Window is populating when the base page Loads you have to set .Visible(false). This is how we've done it in our previous project.

This is the click event

function clientLaunchWindow() {

     var window = $("#Window").data("kendoWindow");

     window.refresh({
             url: "/Order/LaunchWindow"        
     });      
     window.center();
     window.open();

Your Controller will just return the partial view

public ActionResult LaunchWindow()
    {
       return PartialView("_PartialView");
    }

Solution 2

Hello Mate I understand your issue really well. it seems kendo's default feature that it loads content with it's base page load. You should add content instead of LoadcontentFrom chain. and define a div and set a id for that. The in the button click function you should do a ajax call and get the content and load into id that you set for the div.

<% Html.Kendo().Window()
               .Name("partListGridWindow")
               .Width(800)
               .Modal(true)
               .Title("Part List Info")
               .Content(@<text>
                <div id="WindowContent"> </div> </text>)
               .Visible(false)
               .Draggable()
               .Resizable()
               .Render();
%>

Your button is:

function openWindow(e) {
        var GridWindow = $("#partListGridWindow");
        GridWindow.data("kendoWindow").open().center();

    $.ajax({
        type: "GET",
        url: '@Url.Action("LaunchWindow", "Controller")',
        cache: false,
        data: { "x": 1 },

                success: function (result) {
                    if (result) {

                        $("#WindowContent").html(result);
                    }
                    else {
                        $("#WindowContent").html(<h2>No Content found</h3>)
                    }
                }
            });
}