Replace Telerik window with jquery-ui dialog

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

  1. Reference jquery-ui script in your html:

    <script type="text/javascript" src="@Url.Content("~/Scripts/libs/jquery-ui.min.js")"></script>
  2. 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))
  3. 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) } });
  4. Done!

Add comment

Loading