Window with treeview in it throws jQuery error

[Anye]

Greetings, I've been trying to set up a modal popup Window that contains a treeview from which a user can select a single item and then close the window.  

I basically took the code we use all over our site for modal popup windows (without errors) and then just tried putting a treeview in it.   In Firefox the error is not explicitly thrown, the tree itself renders, but anything you tried to put in the window underneath the treeview does not render at all.  In Chrome, the window renders but not the tree and no error is thrown (i.e. you get an empty window).  In IE9 (9.0.8112.16421) you get an error in jQuery-1.8.2.min.js as soon as you try to open the window.  The error says "0x80020101 Microsoft JScript Runtime Error:  could not complete the operation due to error 80020101" (useful, I know).  The window never opens at all.  I am running Windows 7.

I created a dummy test page on my site that includes only the kendo and jQuery libraries/css/js files in the layout and removes everything not involved with housing the treeview in the window and I still get the same error.

The error occurs before calling the controller method to get the data to populate the tree (and I have another treeview that is NOT in a window using the same controller method which one works properly, and if I run in firefox it does actually call the method and populate the tree, just nothing below the tree like buttons - so I am positive the problem is not the controller method).  You can substitute any data you want if you try to repro this since the code below is data agnostic, just give it's type a property called TagName or substitute your own value of DataTextField.

If I remove the code defining the treeview and replace it with a simple "hi", I do not get the error, which proves the problem is the tree + window combination (because remember, the exact same tree works perfectly outside of the window).  

My code is below, distilled down to the absolute simplest case, still throwing the same error in IE9:
(I even got rid of the select handler and the confirm/cancel buttons just to try to get rid of the error)

The versions of jQuery & jQueryUI we include are the full downloaded library from jQuery - we have not customized them in any way.  The specific version number that we are using are ones we've had to upgrade to because of error conflicts with other between other Kendo controls and jQuery.  I suspect something similar is at play here.

If there is a specific way I need to set up the window to support this functionality please let me know, or if there is a problem with the interaction of the window + tree + jQuery that needs to be fixed can we please get a patch for it ASAP?  There are a bunch of places in our app where we'll need to have a tree in a popup window like this.

Thanks in advance, please let me know if you need anything else from me to diagnose the issue!

@model NeedleFinder.WebUI.Areas.CaseMgmt.Models.Tag.ManageTagsViewModel
@using Kendo.Mvc.UI
@{
    ViewBag.Title = "TreeWindowPopup";
    Layout = "~/Views/Shared/_TestLayout.cshtml";
}
<div>  <input type="button" name="btnChooseParent" value="Select" onclick="openParentTagList();" />
</div>
<script id="parentTagSelection" type="text/x-kendo-template">

  @(Html.Kendo().TreeView()
        .Name("trvParentTag")
        .DataTextField("TagName")
       .DataSource(dataSource => dataSource
                                      .Read(read => read
                                                        .Action("GetTagsForTree", "Tag", new { area = "CaseMgmt" }))
        )
   )  

     
</script>
  
<script type="text/javascript">

    function openParentTagList() {
        var kendoWindow = $("<div />").kendoWindow({
            title: "Select parent tag",
            resizable: false,
            modal: true,
            height: 500,
            width: 400
        });

        kendoWindow.data("kendoWindow")
            .content($("#parentTagSelection").html())
            .center().open();

       
        return false;
    }
   
    </script>


My layout looks like this:
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>@ViewBag.Title</title>
     <link href="@Url.Content("~/Content/Site.css")" rel="stylesheet" type="text/css" />
    <link href="@Url.Content("~/Content/themes/redmond/jquery-ui.css")" rel="stylesheet" type="text/css" />
    <!-- PROTOTYPE CSS -->

    <link href="@Url.Content("~/Content/Kendo/2013.1.319.340/kendo.common.min.css")" rel="stylesheet" type="text/css" />
    <link href="@Url.Content("~/Content/Kendo/2013.1.319.340/kendo.default.min.css")" rel="stylesheet" type="text/css" />
    <script src="@Url.Content("~/Scripts/jquery-1.8.2.min.js")" type="text/javascript"></script>
    <script src="@Url.Content("~/Scripts/Kendo/2013.1.319.340/kendo.web.min.js")" type="text/javascript"></script>
    <script src="@Url.Content("~/Scripts/Kendo/2013.1.319.340/kendo.aspnetmvc.min.js")" type="text/javascript"></script>
    <script src="@Url.Content("~/Scripts/jquery-ui-1.10.2.min.js")" type="text/javascript"></script>
    <script src="@Url.Content("~/Scripts/jquery.unobtrusive-ajax.js")" type="text/javascript"></script>
    <script src="@Url.Content("~/Scripts/modernizr-1.7.min.js")" type="text/javascript"></script>
    <script src="@Url.Content("~/Scripts/jQuery.Validate.min.js")" type="text/javascript"></script>
    <script src="@Url.Content("~/Scripts/jquery.validate.unobtrusive.min.js")" type="text/javascript"></script>

    @if (false)
    {
        <script src="@Url.Content("~/Scripts/jquery-1.5.1-vsdoc.js")" type="text/javascript"></script>
    }
</head>

    <body>
       
        @RenderBody()
</body>
</html>

[Petur Subev]

Hello Anye,

I posted a reply in the other thread you opened. Feel free to continue our conversation here or there.

Kind regards,
Petur Subev
the Telerik team