Model Binding Support

16 Nov 20221 minute to read

Model binding allows to bind properties for the components used in field, operator, and value columns. To implement model binding, assign FieldModel, OperatorModel, and ValueModel properties in QueryBuilder.

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()

Default.cs

public ActionResult Index()
    {
            List<string> values = new List<string> { "Mr.", "Mrs." };
            ViewBag.values = values;
            var fieldModel = new { allowFiltering = true, popupHeight = "380px" };
            var operatorModel = new { allowFiltering = true, popupHeight = "380px" };
            var valueModel = new { numericTextBoxModel = new { cssClass = "e-custom" } };
            ViewBag.fieldModel = fieldModel;
            ViewBag.operatorModel = operatorModel;
            ViewBag.valueModel = valueModel;
            return View();
    }