Sunday, December 18, 2011

Re-size and re-center Telerik MVC modal window after ajaxRequest

Telerik MVC modal window can auto-size to fit its initial content. After ajaxRequest, however, the window size stays the same, not adjusting to the new content. Here is how to re-size and re-center a modal window after ajaxRequest. The trick is to remove css "width" and "height" properties from the .t-window-content div.

@{Html.Telerik().Window()
 .Name("Popup")
 .Modal(true)
 .Visible(false)
 .ClientEvents(events => events
  .OnRefresh("resizeOnRefresh")
  .OnResize("centerOnResize"))
 .Render();
}


Saturday, December 17, 2011

Set Min- and Max-Sizes on Telerik ASP.NET MVC Windows

Telerik ASP.NET MVC window (as of 2011.Q3) does not directly support min-length, min-width, max-length or max-width. However, you can set these css properites on its child .t-window-content div. For example,

var winContent = $('#MyWindow .t-window-content');
winContent.css("min-width", "100px");
winContent.css("max-width", "500px");
winContent.css("min-height", "50px");
winContent.css("max-height", "500px");