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.
1 Answer, 1 is accepted
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
Rank 1
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>
<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.
Rank 1
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>
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
Rank 1
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>
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
Rank 1
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.
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
Rank 1
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.
Rank 1
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?
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
Rank 1
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.
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> <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2015.3.1111/styles/kendo.common.min.css"> <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2015.3.1111/styles/kendo.default.min.css"> <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script> <script src="http://kendo.cdn.telerik.com/2015.3.1111/js/kendo.all.min.js"></script> <script src="http://kendo.cdn.telerik.com/2015.3.1111/js/kendo.aspnetmvc.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
Rank 1
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.
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
Rank 1
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: Characterspublic 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?
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
Hi there,
Having a problem with popup-common Module parse failed: C:\Users\vlynch\git\node_modules\@progress\kendo-popup-common\dist\es\parents.js Cannot read property 'name' of null
You may need an appropriate loader to handle this file type.
TypeError: Cannot read property 'name' of null
at Parser.walkFunctionDeclaration (C:\Users\vlynch\git\Total.TGP.Ops\src\node_modules\webpack\lib\Parser.js:537:40)
ERROR in ./~/@progress/kendo-popup-common/dist/es/sibling-container.js
Module parse failed: C:\Users\vlynch\git\node_modules\@progress\kendo-popup-common\dist\es\sibling-container.js Cannot read property 'name' of null
Any ideas what this might be, using webpack.
This is my versions;
"dependencies": {
"@angular/animations": "4.1.3",
"@angular/common": "4.1.3",
"@angular/compiler": "4.1.3",
"@angular/compiler-cli": "4.1.3",
"@angular/core": "4.1.3",
"@angular/forms": "4.1.3",
"@angular/http": "4.1.3",
"@angular/platform-browser": "4.1.3",
"@angular/platform-browser-dynamic": "4.1.3",
"@angular/router": "4.1.3",
"@angular/upgrade": "4.1.3",
"@ngrx/core": "^1.2.0",
"@ngrx/effects": "^2.0.3",
"@ngrx/store": "^2.2.2",
"@progress/kendo-angular-dateinputs": "^1.4.5",
"@progress/kendo-angular-dropdowns": "^1.0.0",
"@progress/kendo-angular-excel-export": "^1.0.0",
"@progress/kendo-angular-grid": "^1.6.2",
"@progress/kendo-angular-inputs": "^1.3.3",
"@progress/kendo-angular-intl": "^1.3.0",
"@progress/kendo-angular-l10n": "^1.0.0",
"@progress/kendo-angular-popup": "^1.3.0",
"@progress/kendo-data-query": "^1.0.0",
"@progress/kendo-drawing": "^1.4.0",
"@progress/kendo-theme-default": "^2.37.5",
The Kendo UI for Angular packages support both the official Angular LTS version (4.4.6) and versions 5.x. Also, due to some breaking changes in the RxJS library, we had to make our packages compatible with the latest RxJS (5.5.x) and thus were forced to introduce breaking changes ourselves:
https://github.com/telerik/kendo-angular/issues/1244
Upgrading both Angular and Kendo UI for Angular packages to the latest official versions should resolve the described issue. You can check out the Changelog section of all related Kendo UI packages to check the latest versions, e.g.:
https://www.telerik.com/kendo-angular-ui/components/grid/changelog/
https://www.telerik.com/kendo-angular-ui/components/popup/changelog/
I hope this helps.
Regards,
Dimiter Topalov
Progress Telerik