Search results

Model Binding in React QueryBuilder component

24 Sep 2021 / 2 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.

Source
Preview
app.tsx
index.html
app.jsx
Copied to clipboard
import { QueryBuilderComponent, ColumnsDirective, ColumnDirective  } from '@syncfusion/ej2-react-querybuilder';
import { RuleModel,  ColumnsModel, ValueModel } from '@syncfusion/ej2-querybuilder';
import { DropDownListModel } from '@syncfusion/ej2-dropdowns';
import * as React from 'react';
import * as ReactDom from 'react-dom';
class App extends React.Component {
        public field: DropDownListModel = {
            allowFiltering : true,
            popupHeight: '400px'
        }
       public operator: DropDownListModel= {
            allowFiltering : true,
            popupHeight: '400px'
        }
        public value: ValueModel = {
            numericTextBoxModel: {
                cssClass: 'e-custom'
            },
            multiSelectModel: {
                cssClass: 'e-custom'
            },
            datePickerModel: {
                cssClass: 'e-custom'
            },
            textBoxModel: {
                cssClass: 'e-custom'
            },
            radioButtonModel: {
                cssClass: 'e-custom'
            }
        }
        public importRules: RuleModel = {
            'condition': 'and',
            'rules': [{
                'label': 'Employee ID',
                'field': 'EmployeeID',
                'type': 'number',
                'operator': 'equal',
                'value': 1001
            }]
        };
    render() {
        return (<div>
            <QueryBuilderComponent width='100%' rule={this.importRules} id='querybuilder' enableNotCondition ="true" fieldModel ={this.field} operatorModel = {this.operator} valueModel = {this.value} >
            <ColumnsDirective>
                    <ColumnDirective field="EmployeeID" label="Employee ID" type="number"/>
                    <ColumnDirective field="LastName" label="Last Name" type="string"/>
                    <ColumnDirective field="FirstName" label="First Name" type="string"/>
                    <ColumnDirective field="Age" label="Age" type="number"/>
                    <ColumnDirective field="City" label="City" type="string"/>
                    <ColumnDirective field="Country" label="Country" type="string"/>
                </ColumnsDirective>
                </QueryBuilderComponent>
        </div>);
    }
}
export default App;
ReactDom.render(<App />,document.getElementById('querybuilder-component'));
Copied to clipboard
<!DOCTYPE html>
<html lang="en">

<head>
    <title>Syncfusion React Query Builder</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="Essential JS 2 for React Components" />
    <meta name="author" content="Syncfusion" />
    <link href="//cdn.syncfusion.com/ej2/ej2-base/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/ej2-buttons/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/ej2-splitbuttons/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/ej2-dropdowns/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/ej2-inputs/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/ej2-calendars/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/ej2-popups/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/ej2-querybuilder/styles/material.css" rel="stylesheet" />
	<link href="index.css" rel="stylesheet" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <script src="systemjs.config.js"></script>
</head>

<body>
        <div id='querybuilder-component'>
            <div id='loader'>Loading....</div>
        </div>
</body>

</html>
Copied to clipboard
import { QueryBuilderComponent, ColumnsDirective, ColumnDirective } from '@syncfusion/ej2-react-querybuilder';
import * as React from 'react';
import * as ReactDom from 'react-dom';
class App extends React.Component {
    constructor() {
        super(...arguments);
        this.field = {
            allowFiltering: true,
            popupHeight: '400px'
        };
        this.operator = {
            allowFiltering: true,
            popupHeight: '400px'
        };
        this.value = {
            numericTextBoxModel: {
                cssClass: 'e-custom'
            },
            multiSelectModel: {
                cssClass: 'e-custom'
            },
            datePickerModel: {
                cssClass: 'e-custom'
            },
            textBoxModel: {
                cssClass: 'e-custom'
            },
            radioButtonModel: {
                cssClass: 'e-custom'
            }
        };
        this.importRules = {
            'condition': 'and',
            'rules': [{
                    'label': 'Employee ID',
                    'field': 'EmployeeID',
                    'type': 'number',
                    'operator': 'equal',
                    'value': 1001
                }]
        };
    }
    render() {
        return (<div>
            <QueryBuilderComponent width='100%' rule={this.importRules} id='querybuilder' enableNotCondition="true" fieldModel={this.field} operatorModel={this.operator} valueModel={this.value}>
            <ColumnsDirective>
                    <ColumnDirective field="EmployeeID" label="Employee ID" type="number"/>
                    <ColumnDirective field="LastName" label="Last Name" type="string"/>
                    <ColumnDirective field="FirstName" label="First Name" type="string"/>
                    <ColumnDirective field="Age" label="Age" type="number"/>
                    <ColumnDirective field="City" label="City" type="string"/>
                    <ColumnDirective field="Country" label="Country" type="string"/>
                </ColumnsDirective>
                </QueryBuilderComponent>
        </div>);
    }
}
export default App;
ReactDom.render(<App />, document.getElementById('querybuilder-component'));