How to increase height of QueryBuilder filter dropdown list?

[Phil Seeman]

How can I increase the height, or number of lines, in the popup element of the filter dropdown?

In other words, how can I have more than 5 lines visible in this dropdown list?

[Keerthikaran Venkatachalam]

Hi Phil Seeman,

We have checked the reported query, and using the FieldModel property in querybuilder, you can customise the popup height. Kindly refer to the below code snippet and UG Link.

[Index.cshtml]

@Html.EJS().QueryBuilder("querybuilder").Width("72%").Columns(col =>

   {

       col.Field("EmployeeID").Label("Employee ID").Type("number").Add();

       col.Field("FirstName").Label("First Name").Type("string").Add();

       col.Field("TitleOfCourtesy").Label("Title Of Courtesy").Type("boolean").Values(new List<string> { "Mr.", "Mrs." }).Add();

       col.Field("Title").Label("Title").Type("string").Add();

       col.Field("HireDate").Label("Hire Date").Type("date").Format("dd/MM/yyyy").Add();

       col.Field("Country").Label("Country").Type("string").Add();

       col.Field("City").Label("City").Type("string").Add();

   }).FieldModel(ViewBag.fieldModel).OperatorModel(ViewBag.operatorModel).ValueModel(ViewBag.valueModel).Render()

[HomeController.cs]

List<string> values = new List<string> { "Mr.", "Mrs." };

            ViewBag.values = values;

            var fieldModel = new { popupHeight = "380px" };

            var operatorModel = new { popupHeight = "380px" };

            var valueModel = new { numericTextBoxModel = new { cssClass = "e-custom" } };

            ViewBag.fieldModel = fieldModel;

            ViewBag.operatorModel = operatorModel;

            ViewBag.valueModel = valueModel;

UG Link: https://ej2.syncfusion.com/aspnetmvc/documentation/query-builder/model-binding 

Get back to us if you need any further assistance on this.

Regards,

KeerthiKaran K V

[Phil Seeman]

That worked perfectly, thanks.

[Keerthikaran Venkatachalam]

You're welcome, Phil. Get back to us if you need any other assistance.

NOTE: If that post is helpful, please mark it as an answer so that other members can locate it more quickly.