Search results

Resizing in ASP.NET Core Dialog control

20 Sep 2021 / 1 minute to read

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

The resizable dialog can be created by setting the EnableResize property to true, which is used to change the size of a dialog dynamically and view its content with expanded mode. The ResizeHandles property can also be configured for all the which 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.

tagHelper
controller.cs
Copied to clipboard
@{
    var resizeDirectionHandles = new List<string>() { "All" };
}

<div id='container' style="height:400px;">
    <ejs-button id="targetButton" content="Open Dialog"></ejs-button>
    <ejs-dialog id='dialog' header='Dialog' allowDragging="true" resizeHandles="resizeDirectionHandles" enableResize="true" content='This is a Dialog with resize enabled' width="250px">
        <e-dialog-buttons>
            <e-dialog-dialogbutton buttonModel="@ViewBag.DialogButtons1" click="dlgButtonClick"></e-dialog-dialogbutton>
            <e-dialog-dialogbutton buttonModel="@ViewBag.DialogButtons2" click="dlgButtonClick"></e-dialog-dialogbutton>
        </e-dialog-buttons>
    </ejs-dialog>
</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>
Copied to clipboard
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();
    }
}

Output be like the below.

dialog