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:
<!-- 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:
// 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!