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.
/**
* querybuilder template sample
*/
var filter = [
{ field: 'EmployeeID', label: 'EmployeeID', type: 'number'},
{ field: 'FirstName', label: 'FirstName', type: 'string'},
{ field: 'LastName', label: 'LastName', type: 'string'},
{ field: 'Age', label: 'Age', type: 'number'},
{ field: 'City', label: 'City', type: 'string'},
{ field: 'Country', label: 'Country', type: 'string'},
];
var importRules = {
'condition': 'and',
'rules': [{
'label': 'Employee ID',
'field': 'EmployeeID',
'type': 'number',
'operator': 'equal',
'value': 1001
}]
};
var qryBldrObj = new ej.querybuilder.QueryBuilder({
columns: filter,
dataSource: employeeData,
rule: importRules,
enableNotCondition: true,
displayMode: "Horizontal",
allowValidation: true,
fieldModel: {
allowFiltering: true
},
operatorModel: {
allowFiltering: true
},
valueModel: {
numericTextBoxModel: {
cssClass: 'e-custom'
},
multiSelectModel: {
cssClass: 'e-custom'
},
datePickerModel: {
cssClass: 'e-custom'
},
textBoxModel: {
cssClass: 'e-custom'
},
radioButtonModel: {
cssClass: 'e-custom'
}
}
});
qryBldrObj.appendTo('#querybuilder');<!DOCTYPE html><html lang="en"><head>
<title>EJ2 Query Builder</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Typescript UI Controls">
<meta name="author" content="Syncfusion">
<link href="//cdn.syncfusion.com/ej2/21.2.3/ej2-base/styles/material.css" rel="stylesheet">
<link href="//cdn.syncfusion.com/ej2/21.2.3/ej2-buttons/styles/material.css" rel="stylesheet">
<link href="//cdn.syncfusion.com/ej2/21.2.3/ej2-splitbuttons/styles/material.css" rel="stylesheet">
<link href="//cdn.syncfusion.com/ej2/21.2.3/ej2-dropdowns/styles/material.css" rel="stylesheet">
<link href="//cdn.syncfusion.com/ej2/21.2.3/ej2-inputs/styles/material.css" rel="stylesheet">
<link href="//cdn.syncfusion.com/ej2/21.2.3/ej2-calendars/styles/material.css" rel="stylesheet">
<link href="//cdn.syncfusion.com/ej2/21.2.3/ej2-popups/styles/material.css" rel="stylesheet">
<link href="//cdn.syncfusion.com/ej2/21.2.3/ej2-querybuilder/styles/material.css" rel="stylesheet">
<link href="styles.css" rel="stylesheet">
<script src="https://cdn.syncfusion.com/ej2/21.2.3/dist/ej2.min.js" type="text/javascript"></script>
<script src="es5-datasource.js" type="text/javascript"></script>
</head>
<body>
<div id="container">
<div id="querybuilder"></div>
</div>
<style type="text/css">
</style>
<script>
var ele = document.getElementById('container');
if(ele) {
ele.style.visibility = "visible";
}
</script>
<script src="index.js" type="text/javascript"></script>
</body></html>#container {
visibility: hidden;
}
#loader {
color: #008cff;
height: 40px;
left: 45%;
position: absolute;
top: 45%;
width: 30%;
}
.e-query-builder {
margin: 0 auto;
}