jQuery modal window throwing TypeError on Kendo Window functions

Question

I am working on an ASP.NET MVC application using Razor.

I have a jQuery popup that contains a button. This button opens up a Kendo popup window. The Kendo popup window binds buttons to click events but is throwing a TypeError when trying to call a Kendo function on the popup div.

Here is my code that is executed when opening the jQuery window.

            $(".doc").bind("click", function () {
                var stocknumber = $(this).data("link");
                if (stocknumber.length > 0) {
                    documentsWindow.dialog("open");
                    documentsWindow.html("Processing... <img src=" + '@Url.Content("~/Content/images/loading.gif")' + " />");
                    documentsWindow.load('@Url.Action("CreateDocs", "Document")?DocForId=4&ForId=' + stocknumber);                
                }
            });

This works fine. The window opens as expected. Here is the code that is fired from the CreateDocs page.

    <script>
            var upOtherWin = $("#upOtherDiv");
            $("#upOtherDoc").bind("click", function (event) {
                    event.preventDefault();
                    if (!upOtherWin.data("kendoWindow")) {
                            upOtherWin.kendoWindow({
                                    actions: ["Maximize", "Minimize", "Close"],
                                    width: "50%",
                                    title: "Upload Other Document",
                                    modal: true
                            });
                    }

                    upOtherWin.data("kendoWindow").content("Loading...");
                    upOtherWin.data("kendoWindow").refresh({ url: '@Url.Action("UploadOtherDocs", "Document")' });
                    upOtherWin.data("kendoWindow").center();
                    upOtherWin.data("kendoWindow").open();
            });
    </script>

I only included the code relevant to the problem. I have verified that the elements exist and are being picked up correctly and I have double-checked that the syntax is correct. My code errors out here:

    upOtherWin.data("kendoWindow").content("Loading...");

And gives me this message - TypeError: upOtherWin.data(...) is undefined

Could this be that the Kendo libraries aren't being loaded? I know that this page is being loaded in a similar fashion from other parts of the application so I'm not sure why it wouldn't load properly here.

Answer 1

You have to Initialize the keno window after Doc ready to use it. can't initialize it on the click event and use it , check the below code .

 <script>
    var upOtherWin = $("#upOtherDiv");
     if (!upOtherWin.data("kendoWindow")) {
          upOtherWin.kendoWindow({
             actions: ["Maximize", "Minimize", "Close"],
             width: "50%",
             title: "Upload Other Document",
             modal: true,
             visible: false,
             });
        }

    $("#upOtherDoc").bind("click", function (event) {
       event.preventDefault();
       upOtherWin.data("kendoWindow").content("Loading...");
       upOtherWin.data("kendoWindow").refresh({ url: '@Url.Action("UploadOtherDocs", "Document")' });
       upOtherWin.data("kendoWindow").center();
       upOtherWin.data("kendoWindow").open();
      });
 <script>

if you are not sure that kendo is loaded , you can check it with code below

if (typeof kendo == "undefined") {
alert("Kendo Not Loaded")
}