Resizing in ASP.NET CORE ComboBox Control

14 Dec 20242 minutes to read

You can dynamically adjust the size of the popup in the ComboBox component by using the AllowResize property. When enabled, users can resize the popup, improving visibility and control, with the resized dimensions being retained across sessions for a consistent user experience.

The following sample illustrates the implementation of the Popup Resize feature.

CSHTML

@{
    List<PopupResizeData> status = new List<PopupResizeData>();
        status.Add(new PopupResizeData() { Status = "Open", State = false });
        status.Add(new PopupResizeData() { Status = "Waiting for Customer", State = false });
        status.Add(new PopupResizeData() { Status = "On Hold", State = true });
        status.Add(new PopupResizeData() { Status = "Follow-up", State = false });
        status.Add(new PopupResizeData() { Status = "Closed", State = true });
        status.Add(new PopupResizeData() { Status = "Solved", State = false });
        status.Add(new PopupResizeData() { Status = "Feature Request", State = false });
        status.Add(new PopupResizeData() { Status = "In Progress", State = false });
        status.Add(new PopupResizeData() { Status = "Pending", State = true });
        status.Add(new PopupResizeData() { Status = "Escalated", State = true });
        status.Add(new PopupResizeData() { Status = "New", State = false });
        status.Add(new PopupResizeData() { Status = "Under Review", State = true });
        status.Add(new PopupResizeData() { Status = "Reopened", State = false });
        status.Add(new PopupResizeData() { Status = "Approved", State = true });
        status.Add(new PopupResizeData() { Status = "Awaiting Approval", State = false });
        status.Add(new PopupResizeData() { Status = "Scheduled", State = false });
        status.Add(new PopupResizeData() { Status = "Canceled", State = true });
        status.Add(new PopupResizeData() { Status = "Completed", State = true });
        status.Add(new PopupResizeData() { Status = "Acknowledged", State = false });        
}
<div id='groupList' class='col-lg-6' style='padding-top:15px'>
    <div class='content'>
        <ejs-combobox id="status" allowResize =true placeholder="Select Status" popupHeight="200px" dataSource="@status">
            <e-combobox-fields value="Status"  ></e-combobox-fields>
        </ejs-combobox>
    </div>
</div>

CSHTML.cs

public class PopupResizeData
{
    public string Status { get; set; }
    public bool State { get; set; }
}