Model Binding Support

16 Nov 20222 minutes 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

@{
    ...
    List<string> values = new List<string> { "Mr.", "Mrs." };
	var fieldModel = new { allowFiltering = true, popupHeight = "380px" };
	var operatorModel = new { allowFiltering = true, popupHeight = "380px" };
	var valueModel = new { numericTextBoxModel = new { cssClass = "e-custom" } };
}

<ejs-querybuilder id="querybuilder" width="73%" fieldModel=fieldModel operatorModel="operatorModel" valueModel="valueModel">
	<e-querybuilder-columns>
		<e-querybuilder-column field="EmployeeID" label="Employee ID" type="number"></e-querybuilder-column>
		<e-querybuilder-column field="FirstName" label="First Name" type="string"></e-querybuilder-column>
		<e-querybuilder-column field="TitleOfCourtesy" label="Title Of Courtesy" type="boolean" values="values"></e-querybuilder-column>
		<e-querybuilder-column field="Title" label="Title" type="string"></e-querybuilder-column>
		<e-querybuilder-column field="HireDate" label="Hire Date" type="date" format="dd/MM/yyyy"></e-querybuilder-column>
		<e-querybuilder-column field="Country" label="Country" type="string"></e-querybuilder-column>
		<e-querybuilder-column field="City" label="City" type="string"></e-querybuilder-column>
	</e-querybuilder-columns>
 </ejs-querybuilder>

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