Resize in ASP.NET MVC Dialog

27 Aug 20262 minutes to read

The Dialog supports resizing. To resize the Dialog, select and resize it using its handle (grip) or by hovering over any of the edges or borders of the Dialog within the sample container.

A resizable Dialog can be created by setting the EnableResize property to true, which changes the size of a Dialog dynamically so its content can be viewed in expanded form. The ResizeHandles property can be configured for the directions in which the Dialog should be resized. When you configure the target property along with the EnableResize property, the Dialog can be resized within its specified target container.

<div id='container' style="height:400px;">
    @Html.EJS().Button("targetButton").Content("Open Dialog").Render()
    @Html.EJS().Dialog("dialog").ResizeHandles(new List <string> () { "All" } ).Header("Dialog").EnableResize(true).Content("This is a Dialog with resize enabled").AllowDragging(true).Target("#container").Width("250px").Buttons(btn=> {
    btn.Click("dlgButtonClick").ButtonModel(ViewBag.DialogButtons1).Add();
    btn.Click("dlgButtonClick").ButtonModel(ViewBag.DialogButtons2).Add();
}).Render()

</div>
<script>
    window.onload = function () {
        document.getElementById('targetButton').onclick = function () {
            var dialog = document.getElementById("dialog").ej2_instances[0];
            dialog.show();
        }
    }
    function dlgButtonClick() {
        var dialogObj = document.getElementById('dialog').ej2_instances[0];
        dialogObj.hide();
    }
</script>
public class HomeController : Controller
{
    public class ButtonModel
    {
        public string content { get; set; }
        public string cssClass { get; set; }
    }
    public ActionResult Index()
    {
        ViewBag.DialogButtons1 = new ButtonModel() { cssClass = "e-flat", content = "OK" };
        ViewBag.DialogButtons2 = new ButtonModel() { content = "Cancel", cssClass = "e-flat" };
        return View();
    }
}

The output looks like the following.

Dialog being resized by dragging its grip handle