Popup Window Issues

18 posts, 0 answers
  1. Michael
    Michael avatar
    10 posts
    Member since:
    Sep 2015

    Posted 14 Nov 2015 Link to this post

    Hello,

       I am having three issues with a modal pop up window.  The first is the most annoying one, periodically I will get the following message when I hit a button to open the window. 

    Line: 82
    Error: Unable to get property 'center' of undefined or null reference

     

        Now if I switch the center to after open it then gives me the same error with open instead of center.  Then if I switch them back it works perfectly fine.  Here is the code from the page to show you what I mean:

    <br />
    @(Html.Kendo().Window()
    .Name("SelectD")
    .Title("Select a Charcter")
    .Content("Loading information.....")
    .LoadContentFrom("Index", "Characters")
    .Modal(true)
    .Visible(false)
    .Width(500)
    .AutoFocus(true))
    <span id="selD" class="btn btn-default">Delete Character</span>
    <script>
    $(document).ready(function () {
    $("#selD")
    .bind("click", function () {
    $("#SelectD").data("kendoWindow").center().open();
    });
    });
    </script>

      I have the above in two places with only the id and name being different between the two, they both reference the same partialview.  It is annoying because I do not know when it will break on me.

    The second issue is closing this modal window.  I have a select and a cancel button defined in the partialview.  The code is as follows:

    <script>
    $('#SelChar').click(function (e)
    {
    e.preventDefault();
    window.top.location.replace = '@Url.Action("Edit", "Characters")' + '?id=' + $('#Char_ID').val();
    window.close();
    });
    </script>
    <a id="SelClose" class="btn btn-danger">Cancel</a>
    <script>
    $('#SelClose').click(function ()
    {
    window.close();
    });
    </script>

        Now the SelChar script works perfectly fine, it closes the modal window and navigates to the proper page.  The SelClose does not, it closes out all windows.  How do I get it to close only the modal window?

       The last issue is without using iframes, how do I get the background of the modal window to be the color I am looking for?  In my partialview the body tag has a style of background-color:grey, but all I get is a white background.  When I had iframes I would get the background color, but I was also getting the navbar which I did not want.

  2. Dimo
    Admin
    Dimo avatar
    8333 posts

    Posted 18 Nov 2015 Link to this post

    Hi Michael,

    The null reference Javascript error indicates that the Window widget reference has been lost. This can be caused by duplicate loading of jQuery on the web page, which deletes all existing Kendo UI widgets. Please make sure that no jQuery or Kendo UI scripts are loaded inside the partial views.

    http://docs.telerik.com/kendo-ui/troubleshooting#kendo-ui-widgets-are-unavailable-or-undefined

    Also make sure that the Window instances are not initialized multiple times over the same DOM element. This can occur if you use the kendoWindow() method when trying to obtain reference to the widget instance.

    http://docs.telerik.com/kendo-ui/intro/installation/jquery-initialization#duplicate-widget-initialization

    Finally, if the same partial view is loaded multiple times on the same web page, please make sure that it does not use any IDs, or that they are different for each partial view instance. In addition, loading a partial view multiple times will execute the scripts inside it multiple times, which may not be desired, e.g. event handlers will be attached again, which can cause undesired behaviors.

    ===

    It is difficult to comment on the closing issue, as the provided Javascript code does not give the full picture of the scenario. However, I would recommend debugging the code, which attaches and executes event handlers, and checking for anything suspicious.

    ===

    When an iframe is NOT used in the Kendo UI Window, the widget renders its content in a <div> tag, so using styles for a <body> tag will have no effect. The Window's HTML markup is described at:

    http://docs.telerik.com/kendo-ui/web/window/overview#html-structure-and-dom-placement

    div.k-window-content is the element that you should apply a custom background style to. This element can also be targeted via an ID CSS selector, e.g. #SelectD.

    Regards,
    Dimo
    Telerik
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  3. Kendo UI is VS 2017 Ready
  4. Michael
    Michael avatar
    10 posts
    Member since:
    Sep 2015

    Posted 05 Dec 2015 Link to this post

    So the following was in the partial page, and was probably causing the null reference, if I get what you were saying correctly:

    @Styles.Render("~/Content/css")
    @Styles.Render("~/Content/kendo/css")
    @Scripts.Render("~/bundles/modernizr")
    @Scripts.Render("~/bundles/jquery")
    @Scripts.Render("~/bundles/kendo")
    @Scripts.Render("~/bundles/bootstrap")
    <link href="@Url.Content("~/Content/kendo/2015.3.930/kendo.common.min.css")" rel="stylesheet" type="text/css" />
    <link href="@Url.Content("~/Content/kendo/2015.3.930/kendo.mobile.all.min.css")" rel="stylesheet" type="text/css" />
    <link href="@Url.Content("~/Content/kendo/2015.3.930/kendo.dataviz.min.css")" rel="stylesheet" type="text/css" />
    <link href="@Url.Content("~/Content/kendo/2015.3.930/kendo.default.min.css")" rel="stylesheet" type="text/css" />
    <link href="@Url.Content("~/Content/kendo/2015.3.930/kendo.dataviz.default.min.css")" rel="stylesheet" type="text/css" />
    <script src="@Url.Content("~/Scripts/kendo/2015.3.930/jquery.min.js")"></script>
    <script src="@Url.Content("~/Scripts/kendo/2015.3.930/jszip.min.js")"></script>
    <script src="@Url.Content("~/Scripts/kendo/2015.3.930/kendo.all.min.js")"></script>
    <script src="@Url.Content("~/Scripts/kendo/2015.3.930/kendo.aspnetmvc.min.js")"></script>
    <script src="@Url.Content("~/Scripts/kendo.modernizr.custom.js")"></script>

     

    As for the closing, it is still closing out everything.

     

    Here is the body of the partial view:

    <body>
    <div class="form-group" style="font-family:'Times New Roman', Times, serif; background-color:grey">
    @Html.Label("Character Name:", htmlAttributes: new { @class = "control-label col-md-3" })
    <div class="col-md-9">
    @Html.DropDownList("Char_ID", (IEnumerable<SelectListItem>)ViewBag.Char_ID, "Select a Character", htmlAttributes: new { @class = "form-control" })
    </div>
    </div>
    <div class="form-group" style="font-family:'Times New Roman', Times, serif">
    <div class="col-md-offset-1 col-md-11">
    <a id="SelChar" class="btn btn-default">Select</a> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
    <script>
    $('#SelChar').click(function (e)
    {
    e.preventDefault();
    if($("#Select"))
    {
    window.top.location.replace = '@Url.Action("Edit", "Characters")' + '?id=' + $('#Char_ID').val();
    }
    else if($("#SelectD"))
    {
    window.top.location.replace = '@Url.Action("Delete", "Characters")' + '?id=' + $('#Char_ID').val();
    }
    window.close();
    });
    </script>
    <a id="SelClose" class="btn btn-danger">Cancel</a>
    <script>
    $('#SelClose').click(function ()
    {
    window.close();
    });
    </script>
    </div>
    </div>
    </body>

     

     When I had two separate partial views to distinguish between an edit and delete selection of the Char_ID, the first close function worked to close the window and move to the new full page.  The cancel button still did not work.  Now that I have moved everything to one partial view, as seen above, neither close works, just closes the entire webpage.

  5. Michael
    Michael avatar
    10 posts
    Member since:
    Sep 2015

    Posted 05 Dec 2015 in reply to Dimo Link to this post

    Well your comment on the scripts was the solve for the issue.  My partial view had the following, which has seemingly caused the issue: 

     

    @Styles.Render("~/Content/css")
        @Styles.Render("~/Content/kendo/css")
        @*@Scripts.Render("~/bundles/modernizr")
        @Scripts.Render("~/bundles/jquery")
        @Scripts.Render("~/bundles/kendo")
        @Scripts.Render("~/bundles/bootstrap")*@
        <link href="@Url.Content("~/Content/kendo/2015.3.930/kendo.common.min.css")" rel="stylesheet" type="text/css" />
        <link href="@Url.Content("~/Content/kendo/2015.3.930/kendo.mobile.all.min.css")" rel="stylesheet" type="text/css" />
        <link href="@Url.Content("~/Content/kendo/2015.3.930/kendo.dataviz.min.css")" rel="stylesheet" type="text/css" />
        <link href="@Url.Content("~/Content/kendo/2015.3.930/kendo.default.min.css")" rel="stylesheet" type="text/css" />
        <link href="@Url.Content("~/Content/kendo/2015.3.930/kendo.dataviz.default.min.css")" rel="stylesheet" type="text/css" />
        @*<script src="@Url.Content("~/Scripts/kendo/2015.3.930/jquery.min.js")"></script>
        <script src="@Url.Content("~/Scripts/kendo/2015.3.930/jszip.min.js")"></script>
        <script src="@Url.Content("~/Scripts/kendo/2015.3.930/kendo.all.min.js")"></script>
        <script src="@Url.Content("~/Scripts/kendo/2015.3.930/kendo.aspnetmvc.min.js")"></script>
        <script src="@Url.Content("~/Scripts/kendo.modernizr.custom.js")"></script>*@

     

    After removing the scripts, I do not have that issue anymore.  The background and close button are still causing issues.  Before going to one partialview when I hit select it would transfer over to the page I wanted and close the popup window.  Now it asks if I want to close the window and closes out everything.  I went to one with the following code and it closes out everything if I hit select or cancel.  I have also tried going back to the code I originally had for two separate partialviews that load the same data and it closes out everything if I hit select or cancel.  Also the way I have it right now the div does not display a background color. 

    <body>
        <div class="form-group" style="font-family:'Times New Roman', Times, serif; background-color:grey">
            @Html.Label("Character Name:", htmlAttributes: new { @class = "control-label col-md-3" })
            <div class="col-md-9">
                @Html.DropDownList("Char_ID", (IEnumerable<SelectListItem>)ViewBag.Char_ID, "Select a Character", htmlAttributes: new { @class = "form-control" })
                 
            </div>
        </div>
        <div class="form-group" style="font-family:'Times New Roman', Times, serif">
            <div class="col-md-offset-1 col-md-11">
                <a id="SelChar" class="btn btn-default">Select</a>                                      
                <script>
                    $('#SelChar').click(function (e)
                    {
                        e.preventDefault();
                        if($("#Select"))
                        {
                            window.top.location.replace = '@Url.Action("Edit", "Characters")' + '?id=' + $('#Char_ID').val();
                        }
                        else if($("#SelectD"))
                        {
                            window.top.location.replace = '@Url.Action("Delete", "Characters")' + '?id=' + $('#Char_ID').val();
                        }
                        window.close();
                    });
                </script>
                <a id="SelClose" class="btn btn-danger">Cancel</a>
                <script>
                    $('#SelClose').click(function ()
                    {
                        window.close();
                    });
                </script>
            </div>
        </div>
    </body>

  6. Dimo
    Admin
    Dimo avatar
    8333 posts

    Posted 09 Dec 2015 Link to this post

    Hello Michael,

    With regard to the closing problem, it looks like the code is closing the browser window. Please close the Kendo UI Window by obtaining reference to the widget instance and executing its close() method.

    http://docs.telerik.com/kendo-ui/api/javascript/ui/window#methods-close

    Partial views should not contain <body> tags, this currently breaks the web page HTML validation and may cause undesired side effects..

    The following code will apply a background style to the Kendo UI Window.

    @(Html.Kendo().Window()
        .Name("my-window-name")
        .Title("Window Title")
        .HtmlAttributes(new { style="background:yellow"})
    )

    Another option is to use external CSS:

    #my-window-name {
      background: yellow;
    }


    Regards,
    Dimo
    Telerik
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  7. Michael
    Michael avatar
    10 posts
    Member since:
    Sep 2015

    Posted 09 Dec 2015 in reply to Dimo Link to this post

    That helped with the background.  Now I almost understand the close, but I just want to clarify it.

    to create the var would I be using the name from the page calling, or creating a new one on the page.  This I think is where my confusion lies.  For instance when I call the popup window:

     

     

    @(Html.Kendo().Window()
                   .Name("Select")
                   .Title("Select a Character")
                   .Content("Loading information.....")
                   .LoadContentFrom("Index", "Characters")
                   .Modal(true)
                   .HtmlAttributes(new { style="background:grey"})
                   .Visible(false)
                   .Width(500)
                   .AutoFocus(true))
               <span id="selE" class="btn btn-default">Edit Character</span>
               <script>
                   $(document).ready(function () {
                       $("#selE")
                           .bind("click", function () {
                               $("#Select").data("kendoWindow").center().open();
                           });
                   });
               </script>

     

    The example uses:

    <div id="dialog"></div>
    <script>
    $("#dialog").kendoWindow();
    var dialog = $("#dialog").data("kendoWindow");
    setTimeout(function() {
      dialog.close();
    }, 1000);
    </script>
    Which I understand it is using the dialog name of the window, as mine would be select.  But I use selE as the div tag for the button that call the window.  Then inside the window on the content page I have the aref tag id as SelChar which references the select window to change the top page.  Of course I might have answered my own question here.  

     

     

  8. Dimo
    Admin
    Dimo avatar
    8333 posts

    Posted 10 Dec 2015 Link to this post

    Hello Michael,

    I am not sure if there is a relationship between the two code snippets, which you have posted, but their are both correct on their own. A widget reference should be obtained via the .data() jQuery method, executed over the jQuery object of the element, to which the widget instance is attached. When using the Kendo UI MVC Window wrapper, this is the <div> with an ID that matches the widget Name(). When using an HTML/JS Kendo UI Window, this is the <div> over which the kendoWindow() method is executed.

    http://docs.telerik.com/kendo-ui/aspnet-mvc/fundamentals#client-side-object

    http://docs.telerik.com/kendo-ui/intro/installation/events-and-methods#get-widget-reference

    The ID of the buttons that are used for closing or opening the Window widget is irrelevant to getting the widget reference.

    Regards,
    Dimo
    Telerik
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  9. Michael
    Michael avatar
    10 posts
    Member since:
    Sep 2015

    Posted 10 Dec 2015 in reply to Dimo Link to this post

    See this is probably where I did go wrong.  No there is no relationship between the two, I was just trying to figure out from the second what I should have.  The first one calls the window function when the button is pressed, so selE is the button that calls the Select window.  Which as you can see loads content, which is:

     

    <body>
        <div class="form-group" style="font-family:'Times New Roman', Times, serif; background-color:grey">
            @Html.Label("Character Name:", htmlAttributes: new { @class = "control-label col-md-3" })
            <div class="col-md-9">
                @Html.DropDownList("Char_ID", (IEnumerable<SelectListItem>)ViewBag.Char_ID, "Select a Character", htmlAttributes: new { @class = "form-control" })
            </div>
        </div>
        <div class="form-group" style="font-family:'Times New Roman', Times, serif">
            <div class="col-md-offset-1 col-md-11">
                <a id="SelChar" class="btn btn-default">Select</a>
                <script>
                    $('#SelChar').click(function (e)
                    {
                        e.preventDefault();
                        ($("#Select"))
                        {
                            window.top.location.replace = '@Url.Action("Edit", "Characters")' + '?id=' + $('#Char_ID').val();
                        }
                        window.close();
                    });
                </script>
                <a id="SelClose" class="btn btn-danger">Cancel</a>
                <script>
                    $('#SelClose').click(function ()
                    {
                        window.close();
                    });
                </script>
            </div>
        </div>
    </body>

    neither of the above window.close() functions work.  I have tried ($("#Select")).close(), but that just gives me an error.  I was trying to do an if else statement as to where the window it was called from was called to navigate to a different page depending on if it was called from selE or selD, but that didn't work for me.  So in going back to this original design I am still stuck with either having window.close() which closes out everything, or a debug error that doesn't close the popup window.

  10. Dimo
    Admin
    Dimo avatar
    8333 posts

    Posted 11 Dec 2015 Link to this post

    Hello Michael,

    Please note the difference between

    - the browser window object
    window

    - a DOM element wrapped in a jQuery object
    $("#Select")

    - a Kendo UI Window object
    $("#Select").data("kendoWindow")

    Of all above statements, only the last one will be useful to you when trying to call Kendo UI Window methods.

    $("#Select").data("kendoWindow").close();


    You certainly can also use window.close(), but only if you first overwrite the global "window" variable and assign the Kendo UI Window instance to it. (Although we are doing this on our demos, it may not be appropriate in real-world scenarios).


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


    I hope this will clear any misunderstanding that might have occurred.

    Regards,
    Dimo
    Telerik
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  11. Michael
    Michael avatar
    10 posts
    Member since:
    Sep 2015

    Posted 11 Dec 2015 in reply to Dimo Link to this post

    I think I understand what you are saying, but to clarify my thoughts.  I can call following from inside the popup window?

    $("#Select").data("kendoWindow").close();

     

     

    I hope I am understanding that correctly.

  12. Michael
    Michael avatar
    10 posts
    Member since:
    Sep 2015

    Posted 12 Dec 2015 Link to this post

    Well I am getting the window to close correctly, but it has brought up another issue.  It is always bringing up the last window.  Ok to be clearer, I have a grouping of buttons on the page.  With each button I want to call a different window.  So prior to each button I have code as the following:

    @(Html.Kendo().Window()
                    .Name("Select")
                    .Title("Select a Character")
                    .Content("Loading information.....")
                    .LoadContentFrom("Index", "Characters")
                    .Modal(true)
                    .HtmlAttributes(new { style="background:grey"})
                    .Visible(false)
                    .Width(500)
                    .AutoFocus(true))
                <span id="selE" class="btn btn-default">Edit Character</span>
                <script>
                    $(document).ready(function () {
                        $("#selE")
                            .bind("click", function () {
                                $("#Select").data("kendoWindow").center().open();
                            });
                    });
                </script>

    Each area has a minor difference.  But I run into the issue, that say for this I hit the selE button but it is bringing up the window for selD since the code for selD is after selE on the page.  Is it possible to have more than one window coded on the page?  If so, how would I get the browser to recognize the selection I am looking for?

     

  13. Dimo
    Admin
    Dimo avatar
    8333 posts

    Posted 15 Dec 2015 Link to this post

    Hi Mihael,

    The provided information makes me believe that all Kendo UI Window instances are declared with the same Name(), which is causing the unexpected behavior. You can have as many Kendo UI widgets on the page, as necessary, however, the Name of each widget instance on the page should be unique.

    http://docs.telerik.com/kendo-ui/aspnet-mvc/fundamentals#configuration-Name

    The statement below can be executed from inside the Kendo UI Window, if the widget is NOT using an iframe.

    $("#Select").data("kendoWindow").close();


    http://docs.telerik.com/kendo-ui/web/window/overview#reference


    Regards,
    Dimo
    Telerik
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  14. Michael
    Michael avatar
    10 posts
    Member since:
    Sep 2015

    Posted 15 Dec 2015 in reply to Dimo Link to this post

    Hi Dimo,

        One would think the way it is acting that yes it is using the same Name(), but it isn't.  I will show you two of the buttons, the second one I will bring up is the one that is always being used for any button. 

    First of 5 buttons:

    @(Html.Kendo().Window()
                    .Name("Select")
                    .Title("Select a Character")
                    .Content("Loading information.....")
                    .LoadContentFrom("Index", "Characters")
                    .Modal(true)
                    .HtmlAttributes(new { style="background:grey"})
                    .Visible(false)
                    .Width(500)
                    .AutoFocus(true))
                <span id="selE" class="btn btn-default">Edit Character</span>
                <script>
                    $(document).ready(function () {
                        $("#selE")
                            .bind("click", function () {
                                $("#Select").data("kendoWindow").center().open();
                            });
                    });
                </script>
     

    Last of 5 buttons:

     

    @(Html.Kendo().Window()
                    .Name("SelectD")
                    .Title("Select a Character")
                    .Content("Loading information.....")
                    .LoadContentFrom("IndexD", "Characters")
                    .Modal(true)
                    .HtmlAttributes(new { style = "background:grey" })
                    .Visible(false)
                    .Width(500)
                    .AutoFocus(true))
                <span id="selD" class="btn btn-default">Delete Character</span>
                <script>
                    $(document).ready(function () {
                        $("#selD")
                            .bind("click", function () {
                                $("#SelectD").data("kendoWindow").center().open();
                            });
                    });
                </script>

    I knew to be very specific in the naming of each so as not to cause an issue.  But it seems to have caused one anyways.

  15. Dimo
    Admin
    Dimo avatar
    8333 posts

    Posted 17 Dec 2015 Link to this post

    Hi Michael,

    The provided code looks OK. Here is a test page, which works as expected. Please compare it with your implementation.

    Here is a video as well:

    http://screencast.com/t/vn6hlCEjn74


    @{
        Layout = null;
    }
    <!DOCTYPE html>
    <html>
    <head>
      <meta charset="utf-8">
      <title>Kendo UI Windows</title>
     
     
      <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
    </head>
    <body>
     
    @(Html.Kendo().Window()
        .Name("window1")
        .Title("First Window")
        .Content("loading...")
        .LoadContentFrom("AjaxContent1", "Window")
        .Draggable()
        .Resizable()
        .Visible(false)
    )
     
    @(Html.Kendo().Window()
        .Name("window2")
        .Title("Second Window")
        .Content("loading...")
        .LoadContentFrom("AjaxContent2", "Window")
        .Draggable()
        .Resizable()
        .Visible(false)
    )
     
    <button id="openWindow1" type="button" class="k-button">Open Window 1</button>
    <button id="openWindow2" type="button" class="k-button">Open Window 2</button>
     
    <script>
        $(function () {
     
        $("#openWindow1").click(function () {
            $("#window1").data("kendoWindow").center().open();
        });
     
        $("#openWindow2").click(function () {
            $("#window2").data("kendoWindow").center().open();
        });
     
    });
    </script>
     
    </body>
    </html>


    Regards,
    Dimo
    Telerik
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  16. Michael
    Michael avatar
    10 posts
    Member since:
    Sep 2015

    Posted 18 Dec 2015 Link to this post

    Hello Dimo,

       Well I still am making no headway with this.  I select edit and it brings me to delete.  Everything looks good and I am having a bear of a time figuring out where it is going wrong.  Hitting F12 on IE shows exact what I think it should be showing:

     

    <!DOCTYPE html>
    <html class="js flexbox no-flexboxlegacy canvas canvastext webgl no-touch geolocation postmessage no-websqldatabase indexeddb hashchange history draganddrop websockets rgba hsla multiplebgs backgroundsize borderimage borderradius boxshadow textshadow opacity cssanimations csscolumns cssgradients no-cssreflections csstransforms csstransforms3d csstransitions fontface generatedcontent video audio localstorage sessionstorage webworkers applicationcache svg inlinesvg no-smil svgclippaths k-ie k-ie11 js "><head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>LOTRO Character DB Edit - Lord of the Rings Online Database</title>
        <link href="/Content/bootstrap.css" rel="stylesheet">
    <link href="/Content/site.css" rel="stylesheet">
     
        <script src="/Scripts/modernizr-2.6.2.js"></script>
     
        <!--This bundle was moved by the Telerik VS Extensions for compatibility reasons-->
        <script src="/Scripts/jquery-1.10.2.js"></script>
     
        <link href="/Content/kendo/2015.3.1111/kendo.common.min.css" rel="stylesheet" type="text/css">
        <link href="/Content/kendo/2015.3.1111/kendo.mobile.all.min.css" rel="stylesheet" type="text/css">
        <link href="/Content/kendo/2015.3.1111/kendo.dataviz.min.css" rel="stylesheet" type="text/css">
        <link href="/Content/kendo/2015.3.1111/kendo.default.min.css" rel="stylesheet" type="text/css">
        <link href="/Content/kendo/2015.3.1111/kendo.dataviz.default.min.css" rel="stylesheet" type="text/css">
        <script src="/Scripts/kendo/2015.3.1111/jquery.min.js"></script>
        <script src="/Scripts/kendo/2015.3.1111/jszip.min.js"></script>
        <script src="/Scripts/kendo/2015.3.1111/kendo.all.min.js"></script>
        <script src="/Scripts/kendo/2015.3.1111/kendo.aspnetmvc.min.js"></script>
        <script src="/Scripts/kendo.modernizr.custom.js"></script>
    </head>
    <body style='font-family: "Times New Roman", Times, serif; background-color: gray;'>
        <div class="navbar navbar-inverse navbar-fixed-top">
            <div class="container">
                <div class="navbar-header">
                    <button class="navbar-toggle" type="button" data-toggle="collapse" data-target=".navbar-collapse">
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                    </button>
                     
                </div>
                <div class="navbar-collapse collapse">
                </div>
            </div>
        </div>
        <div class="container body-content">
             
     
     
     
        <h2 style='text-align: center; color: white; font-family: "Times New Roman", Times, serif;'>Lord of The Rings Online Character Database Edit Menu</h2>
     
        <div class="col-md-3">
            <div class="col-md-2"></div>
            <div class="col-md-1">
                <br>
                <br>
                <br>
                <br>
                <br>
                <br>
                <br>
                <br>
                <script>
        jQuery(function(){jQuery("#Select").kendoWindow({"modal":true,"iframe":false,"draggable":false,"scrollable":true,"pinned":false,"title":"Select a Character","resizable":false,"content":"/Characters","width":500,"actions":["Close"]});});
    </script>
                <span class="btn btn-default" id="selE">Edit Character</span>
                <script>
                    $(document).ready(function () {
                        $("#selE").click(function() {
                            //.bind("click", function () {
                                $("#Select").data("kendoWindow").center().open();
                            });
                    });
                </script>
                <br>
                <br>
                <br>
                <br>
                <br>
                <br>
                <br>
                <br>
                <br>
                <br>
                <br>
                <br>
                <script>
        jQuery(function(){jQuery("#SelectC").kendoWindow({"modal":true,"iframe":false,"draggable":false,"scrollable":true,"pinned":false,"title":"Select a Character","resizable":false,"content":"/CharacterCrafts","width":500,"actions":["Close"]});});
    </script>
                <span class="btn btn-default" id="selC">Edit Craft</span>
                <script>
                    $(document).ready(function () {
                        $("#selC").click(function() {
                                $("#SelectC").data("kendoWindow").center().open();
                            });
                    });
                </script>
                <br>
                <br>
                <br>
                <br>
                <br>
                <br>
                <br>
                <br>
            </div>
        </div>
        <div class="col-md-6" style='background-image: url("../../Content/BackgroundImages/gandalf_the_grey.jpg");'>
            <br>
            <br>
            <br>
            <br>
            <br>
            <br>
            <br>
            <br>
            <br>
            <br>
            <br>
            <br>
            <br>
            <br>
            <br>
            <br>
            <br>
            <br>
            <br>
            <br>
            <br>
            <br>
            <br>
            <br>
            <br>
            <div class="col-md-2"></div>
            <div class="col-md-2">
                <div class="col-md-offset-1">
                    <a class="btn btn-default" href="/Menu/Menu">Return to Main Menu</a>
                </div>
                <div class="col-md-1"></div>
            </div>
            <div class="col-md-2"></div>
        </div>
        <div class="col-md-3">
            <div class="col-md-pull-1">
                <br>
                <br>
                <br>
                <br>
                <br>
                <br>
                <br>
                <br>
                <script>
        jQuery(function(){jQuery("#SelectD").kendoWindow({"modal":true,"iframe":false,"draggable":false,"scrollable":true,"pinned":false,"title":"Select a Character","resizable":false,"content":"/Characters/IndexD","width":500,"actions":["Close"]});});
    </script>
                <span class="btn btn-default" id="selD">Delete Character</span>
                <script>
                    $(document).ready(function () {
                        $("#selD").click(function() {
                            //.bind("click", function () {
                                $("#SelectD").data("kendoWindow").center().open();
                            });
                    });
                </script>
                <br>
                <br>
                <br>
                <br>
                <br>
                <br>
                <br>
                <br>
                <br>
                <br>
                <br>
                <br>
                <script>
        jQuery(function(){jQuery("#SelectR").kendoWindow({"modal":true,"iframe":false,"draggable":false,"scrollable":true,"pinned":false,"title":"Select a Character","resizable":false,"content":"/CharacterReputations","width":500,"actions":["Close"]});});
    </script>
                <span class="btn btn-default" id="selR">Edit Reputation</span>
                <script>
                    $(document).ready(function () {
                        $("#selR").click(function() {
                                $("#SelectR").data("kendoWindow").center().open();
                            });
                    });
                </script>
                <br>
                <br>
                <br>
                <br>
                <br>
                <br>
                <br>
                <br>
            </div>
            <div class="col-md-2"></div>
        </div>
     
            <hr>
            <footer>
                <p>© 2015 - MRM2 Inc</p>
            </footer>
        </div>
     
     
        <script src="/Scripts/bootstrap.js"></script>
    <script src="/Scripts/respond.js"></script>
     
         
     
    <!-- Visual Studio Browser Link -->
    <script id="__browserLink_initializationData" type="application/json">
        {"appName":"Internet Explorer","requestId":"dae971785d58474da7e31538c333a6c6"}
    </script>
    <script src="http://localhost:54285/a214ceb7720741f5be8c3c244a6b1ccb/browserLink" type="text/javascript" async="async"></script>
    <!-- End Browser Link -->
     
     
     
     
    <div class="k-widget k-window" style="left: 462.47px; top: 273px; width: 500px; padding-top: 33px; display: none; min-height: 50px; min-width: 90px;"><div class="k-window-titlebar k-header" style="margin-top: -33px;"> <span class="k-window-title" id="Select_wnd_title">Select a Character</span><div class="k-window-actions"><a class="k-window-action k-link" role="button" href="#"><span class="k-icon k-i-close" role="presentation">Close</span></a></div></div><div tabindex="0" class="k-window-content k-content" id="Select" role="dialog" aria-labelledby="Select_wnd_title" style="background: grey;" data-role="window">
        <title></title>
        <link href="/Content/bootstrap.css" rel="stylesheet">
    <link href="/Content/site.css" rel="stylesheet">
     
        <link href="/Content/kendo/css" rel="stylesheet">
     
        <link href="/Content/kendo/2015.3.1111/kendo.common.min.css" rel="stylesheet" type="text/css">
        <link href="/Content/kendo/2015.3.1111/kendo.mobile.all.min.css" rel="stylesheet" type="text/css">
        <link href="/Content/kendo/2015.3.1111/kendo.dataviz.min.css" rel="stylesheet" type="text/css">
        <link href="/Content/kendo/2015.3.1111/kendo.default.min.css" rel="stylesheet" type="text/css">
        <link href="/Content/kendo/2015.3.1111/kendo.dataviz.default.min.css" rel="stylesheet" type="text/css">
     
        <div class="form-group" style='font-family: "Times New Roman", Times, serif;'>
            <label class="control-label col-md-3" for="Character_Name:">Character Name:</label>
            <div class="col-md-9">
                <select name="Char_ID" class="form-control" id="Char_ID"><option value="">Select a Character</option>
    <option value="1">Alfwine</option>
    </select>
                 
            </div>
        </div>
        <div class="form-group" style='font-family: "Times New Roman", Times, serif;'>
            <div class="col-md-offset-1 col-md-11">
                <a class="btn btn-default" id="SelChar">Select</a>                                      
                <script>
                    $('#SelChar').click(function (e)
                    {
                        e.preventDefault();
                        ($("#Select"))
                        {
                            window.top.location.replace = '/Characters/Edit' + '?id=' + $('#Char_ID').val();
                        }
                        $("#Select").data("kendoWindow").close();
                    });
                </script>
                <a class="btn btn-danger" id="SelClose">Cancel</a>
                <script>
                    $('#SelClose').click(function ()
                    {
                        $("#Select").data("kendoWindow").close();
                    });
                </script>
            </div>
        </div>
    </div></div><div class="k-widget k-window" style="left: 462.47px; top: 527px; width: 500px; padding-top: 33px; display: none; min-height: 50px; min-width: 90px;"><div class="k-window-titlebar k-header" style="margin-top: -33px;"> <span class="k-window-title" id="SelectC_wnd_title">Select a Character</span><div class="k-window-actions"><a class="k-window-action k-link" role="button" href="#"><span class="k-icon k-i-close" role="presentation">Close</span></a></div></div><div tabindex="0" class="k-window-content k-content" id="SelectC" role="dialog" aria-labelledby="SelectC_wnd_title" style="background: grey;" data-role="window"></div></div><div class="k-widget k-window" style="left: 1260px; top: 273px; width: 500px; padding-top: 33px; display: none; min-height: 50px; min-width: 90px;"><div class="k-window-titlebar k-header" style="margin-top: -33px;"> <span class="k-window-title" id="SelectD_wnd_title">Select a Character</span><div class="k-window-actions"><a class="k-window-action k-link" role="button" href="#"><span class="k-icon k-i-close" role="presentation">Close</span></a></div></div><div tabindex="0" class="k-window-content k-content" id="SelectD" role="dialog" aria-labelledby="SelectD_wnd_title" style="background: grey;" data-role="window">
        <title></title>
        <link href="/Content/bootstrap.css" rel="stylesheet">
    <link href="/Content/site.css" rel="stylesheet">
     
        <link href="/Content/kendo/css" rel="stylesheet">
     
        <link href="/Content/kendo/2015.3.1111/kendo.common.min.css" rel="stylesheet" type="text/css">
        <link href="/Content/kendo/2015.3.1111/kendo.mobile.all.min.css" rel="stylesheet" type="text/css">
        <link href="/Content/kendo/2015.3.1111/kendo.dataviz.min.css" rel="stylesheet" type="text/css">
        <link href="/Content/kendo/2015.3.1111/kendo.default.min.css" rel="stylesheet" type="text/css">
        <link href="/Content/kendo/2015.3.1111/kendo.dataviz.default.min.css" rel="stylesheet" type="text/css">
     
        <div class="form-group" style='font-family: "Times New Roman", Times, serif; background-color: grey;'>
            <label class="control-label col-md-3" for="Character_Name:">Character Name:</label>
            <div class="col-md-9">
                <select name="Char_ID" class="form-control" id="Char_ID"><option value="">Select a Character</option>
    <option value="1">Alfwine</option>
    </select>
     
            </div>
        </div>
        <div class="form-group" style='font-family: "Times New Roman", Times, serif;'>
            <div class="col-md-offset-1 col-md-11">
                <a class="btn btn-default" id="SelChar">Select</a>                                      
                <script>
                    $('#SelChar').click(function (e)
                    {
                        ($("#SelectD"))
                        {
                            window.top.location.replace = '/Characters/Delete' + '?id=' + $('#Char_ID').val();
                        }
                        $("#SelectD").data("kendoWindow").close();
                    });
                </script>
                <a class="btn btn-danger" id="SelClose">Cancel</a>
                <script>
                    $('#SelClose').click(function ()
                    {
                        $("#SelectD").data("kendoWindow").close();
                    });
                </script>
            </div>
        </div>
    </div></div><div class="k-widget k-window" style="left: 1260px; top: 527px; width: 500px; padding-top: 33px; display: none; min-height: 50px; min-width: 90px;"><div class="k-window-titlebar k-header" style="margin-top: -33px;"> <span class="k-window-title" id="SelectR_wnd_title">Select a Character</span><div class="k-window-actions"><a class="k-window-action k-link" role="button" href="#"><span class="k-icon k-i-close" role="presentation">Close</span></a></div></div><div tabindex="0" class="k-window-content k-content" id="SelectR" role="dialog" aria-labelledby="SelectR_wnd_title" style="background: grey;" data-role="window"></div></div><bl style="display: block;"><img title="Web Essentials" class="logo" draggable="true" alt="Web Essentials" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAAAoCAMAAAC7IEhfAAACplBMVEX/////AAB/AAD/fwD/VQD/Pz//VSriVBzdRCLuVSLfTx/hSy3lTCbdTSHfSirgUSjjSCTlTCLkSSjkUCjmTiTiTyfoTyfhTifiTCbmTCbjTSThSyXkTCbkSyXjSyXjTiXjTCTjSyTkTSbiTCTlTCTjSyXkTSXkTCTiSyfkTCblTSbjTCbkTCbkTCXlTSbjTCbiTSbkTCblTSXkTSXkTSXkTCXjTSXjTSbkTSXjTSXjTSbkTSXkTSbjTCbjTSXkTCbkTCbiTSbkTSbjTCbjTSXjTCXjTSbjTCXkTCXjTCXkTCXjTCXjTSXjTCbjTSbkTSbjTCbkTSbkTCbjTCbjTSbjTCXkTCbkTSbjTSbjTCXkTSbjTCXjTSXkTSXjTCbkTSb////xZSnkTibrWSjoVCftXijpVifqVyfqWCfqd1rlTibrWijtXSjob1DvYinwZivxZCnlTybyfUr0jmL6z7376OP76uX97+r99PL99/T9+ffmUSbpVyfmUCbkUCnqWSfmUSfqfGDmXzzmYT/rWyjrfmLsWyjsXCjsbkbsiG7mZUTnUiftflvtinDtkHjuXyjuYCjulH3vYSjnUyfwYinwZCnnYT/waC3nZEPnZkTxazHxcDjxcDnxcTryeETye0jyfErnZkXyfk3ysJ/zglHzi1/zjF/zjWLztaXztqb0i17kUCr0kmn0u6z1mXH1rZH2poP2yLz2zsP3rY73r5D30cf4w674xK741s75zLj50L753NXoVSf65uD73M/74db75Nr75uD75+LobU3obk776ub77Oj77ur859z86OD88Ov88e/88/D89fT97+njTyn98ezjUSvlUCb99/X9+Pb9+Pfpdln+9fL+9/X++ff++vj/+/n//Pv//fz//f3pd1rpeFv//v6yzbn+AAAAX3RSTlMAAQICAwQGCQ8PEBEUFxgZHB4mJiotLTQ1NTg9Q0RKS1NUVlpaXmBhYmpwcXJ1d3h9f4CHjo+Xl5uenqSlpqittLW5u7zExsvL0tLY2dvh4eLk6Onq7O/w8fL3+fv7/UUm+e4AAAJFSURBVHhehdJlYxQ7GIbhLO5erEhxitNiRU6RLl5cCpQ+mZW6u+Du7u7u7u7ubuefMJkkm2F2u70/JXmvT0kIIVEoqShiFFkijOTQDkuODHOJgJ3DcCt0auZWA+Ec9vQPk4EeHIb4hwuAEA6D/cPZQDCHQf7hDCCIw0Bf8PCXy1lpBnQBgRzW9gEPFlJK75zZocPlQC0OK3nDQ7pjFehwJlCBQ9s0Kzz2gSrowFQb4Y2G3tu5kK34ShXcCIwioqEAVj2m52Zx9+k9NcFUYIiEAwBc149z7jOXwF2hgGuA/hL2FpDmrwR+f2arb6euCegGwiQMNeDZu5T+3J/wnIEnB7RsARcBoRK2N+CReTf10f9snr1T80An0E7Clhxi/j1KmT29WVMwDmghYWMBsdSAJ52aCd4AGklYV8CUFwb8dWm7Ca4HAiSsyuED5j6y+a3dChYBVSQsG8PgxXxKX67dksNAXpYHJiK6DJGNF/f48A+wNZetfpwX95gOjCOehnN4ZRP0lj2iIgY3AMMUjAAW5tKjx2G0l0kJ1wCDFOwL4HUKZEteKegG+ijY3fIf9zzzwMVANwU7W6CWmcfh021JQCcF21qhlvmG0u9XT6Rp8UAbBZt6QW3f7Qu7NL1YoImC9a1Q5QLqKVizeDgHqKFg+WJhagZiyhHVFF8w3R1XBGASMTXSC65LcjlgNMIMq7f+b6KC8cmx78Cb0K9VNfJvpRt2HTwd5qLtXRqUIj6r3DxsrFBjejWrSPxlC+gYMXlghzrE2l/nse3AksfajAAAAABJRU5ErkJggg=="><blbar><blbutton title="Use CTRL+ALT+D to enable Design Mode">Design</blbutton><blbutton title="Use CTRL+ALT+I to enable Inspect Mode">Inspect</blbutton><blbutton title="Use CTRL+ALT+T to sync the current CSS changes into Visual Studio">Save F12 changes</blbutton><blcheckbox><label title="Use CTRL+ALT+U to continuously sync CSS changes into Visual Studio" style="font-weight: normal;" for="_0_5756729706667734">F12 auto-sync<input title="Use CTRL+ALT+U to continuously sync CSS changes into Visual Studio" id="_0_5756729706667734" type="checkbox"></label></blcheckbox><blcheckbox><label title="This will auto-hide this menu. Click the CTRL key to make it visible" style="font-weight: normal;" for="_0_43442904616752265">Auto-hide<input title="This will auto-hide this menu. Click the CTRL key to make it visible" id="_0_43442904616752265" type="checkbox"></label></blcheckbox></blbar></bl><style>bl {position: fixed; left: 10px; bottom: 5px; opacity: .3; color:black; z-index:2147483638; }bl:hover {opacity: .95;}bl .logo {width: 40px; margin-right: 8px; vertical-align:baseline; }blbar {background: #d8d8d8; display: inline-block; font:13px arial; position: relative; top: -15px; border-radius: 5px; padding: 4px 3px}blbar img { margin: -2px 0 0 2px; }blbar label {display: inline; cursor: pointer; font: 13px arial; }blbar blcheckbox {margin: 0 4px;}blbar blbutton, blbar blcheckbox:not(:last-child) {border-right: 1px solid #b8b6b6; padding-right: 7px}blbar input {margin: -3px auto auto 3px!important; vertical-align: middle;}blbar blbutton:not([disabled]) {cursor: pointer; display: inline-block; margin: 0 4px; }blbar blbutton:hover {text-decoration: underline;}.bldisabled {cursor:default !important; opacity:.5}.bldisabled:hover {text-decoration:none;}</style></body></html>

    If you see what might be wrong with it I would appreciate it.  I know that at this time that two of the buttons display nothing as I am working the issues there to get them to bring up a page.

  17. Dimo
    Admin
    Dimo avatar
    8333 posts

    Posted 18 Dec 2015 Link to this post

    Hello Michael,

    The Kendo UI Window instances are loading full views, instead of partial views, which makes the web page HTML markup invalid and can cause undesired side effects. Please fix this issue and try again.

    In case you need further assistance afterwards, please provide standalone runnable example, which will reveal the cause of the problem immediately and speed up resolving this issue.

    Regards,
    Dimo
    Telerik
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  18. Michael
    Michael avatar
    10 posts
    Member since:
    Sep 2015

    Posted 18 Dec 2015 in reply to Dimo Link to this post

    Hello Dimo,

        I wonder about that now, because the controller is not issuing a full view for either.  Here is the controller code, which shows that is just partialview:

    // GET: Characters
    public async Task<ActionResult> Index()
    {
          ViewBag.Char_ID = new SelectList(db.Characters, "Char_ID", "Char_First_Name", "Char_Last_Name");
          return PartialView();
    }
     
    public async Task<ActionResult> IndexD()
    {
          ViewBag.Char_ID = new SelectList(db.Characters, "Char_ID", "Char_First_Name", "Char_Last_Name");
          return PartialView();
    }

    Could the issue be in the view that it calls?

  19. Dimo
    Admin
    Dimo avatar
    8333 posts

    Posted 21 Dec 2015 Link to this post

    Hello Michael,

    The previously provided HTML markup shows that the Window content contains <link> and <title> tags, which should not be the case. Please investigate why this occurs, e.g. what is the content, which is returned by the server when a partial view is requested via Ajax. The server code in your last reply looks OK.

    Regards,
    Dimo
    Telerik
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
Back to Top
Kendo UI is VS 2017 Ready