When you need to display some information via pop up window, it's better to use jquery-ui dialog than Telerik window. Not only because the Telerik is not supported any more, but also because the jquery-ui dialog can behaves much better, pure client side and with even less and simpler code!
Step-by-step guide
-
Reference jquery-ui script in your html:
<script type="text/javascript" src="@Url.Content("~/Scripts/libs/jquery-ui.min.js")"></script>
-
Add a placeholder div like this, and delete the original Telerik placeholder:
<pre class="brush: html"><!-- Add a pure html placeholder -->
<div id="dispatching-history-report-window" title="Dispatching History" style="display: none;"></div>
<!-- Delete the following Telerik placeholder --> @(Html.Telerik().Window().Modal(true) .Name("DispatchingHistoryReportWindow") .Title("Dispatching History") .Buttons(buttons => buttons.Maximize().Close()) .Width(800).Resizable(resizing => resizing.Enabled(true)) .Height(440) .Visible(false).Scrollable(false) .Draggable(true))
-
Update the popup code as below shows:
<pre class="brush: javascript">// Original pop up using Telerik window
$("#DispatchingHistoryReportWindow").data('tWindow').center().open().content("Loading...").ajaxRequest(url);
// Updated pop up using jquery-ui dialog var $dialog = $("#dispatching-history-report-window");
var dialogOptions = { height: "auto", width: "auto", position: "center", modal: true };
$dialog .dialog(dialogOptions) .html("
Loading...");$.ajax({ url: url, cache: true, dataType: "html", success: function (page) { $dialog .html(page) .dialog(dialogOptions) } });
- Done!