How to Add Custom Operator for Query Builder in React?
This Knowledge Base explains the way to use custom operator for React React Querybuilder.
You can add the required operator for any column by using the operators property. You can add between custom operator for Date type column in React Querybuilder using value template. We have prepared a sample in which the Hire Date column has between operator for type date with Date Picker as value. Please check the below code snippet.
Index.js
export class Default extends SampleBase {
constructor() {
super(...arguments);
this.ds = [{ key: 'between (custom)', value: 'and_bet' }];
this.importRules = {
condition: 'and',
rules: [
{
label: 'Date',
field: 'Date',
type: 'date',
operator: 'and_bet'
}
]
};
}
paymentTemplate(props) {
return <PaymentTemplate {...props} />;
}
transactionTemplate(props) {
return <TransactionTemplate {...props} />;
}
render() {
return (
<div>
<QueryBuilderComponent
width="100%"
rule={this.importRules}
id="querybuilder"
>
<ColumnsDirective>
<ColumnDirective field="Category" label="Category" type="string" />
<ColumnDirective
field="PaymentMode"
label="PaymentMode"
type="string"
operators={this.customOperators}
template={this.paymentTemplate}
/>
<ColumnDirective
field="TransactionType"
label="TransactionType"
type="string"
/>
<ColumnDirective
field="Description"
label="Description"
type="string"
/>
<ColumnDirective
field="Date"
label="Date"
type="date"
operators={this.ds}
template={this.transactionTemplate}
/>
<ColumnDirective field="Amount" label="Amount" type="string" />
</ColumnsDirective>
</QueryBuilderComponent>
</div>
);
}
}
render(<Default />, document.getElementById('sample'));
Transaction-temp.js
export class TransactionTemplate extends React.Component {
constructor(props) {
super(props);
this.state = Object.assign({}, props);
this.qryBldrObj = getComponent(
document.getElementById('querybuilder'),
'query-builder'
);
}
onKeyPress(event) {
let element = event.element;
this.dateObj;
this.qryBldrObj.notifyChange(
[event.element.value, this.dateObj2.element.value],
element,
'value'
);
}
onKeyPressBtwn(event) {
let element = event.element;
this.qryBldrObj.notifyChange(
[this.dateObj1.element.value, event.element.value],
element,
'value'
);
}
dateValue = new Date();
render() {
const args = this.state;
return (
<div>
<DatePickerComponent
value={this.dateValue}
change={this.onKeyPress.bind(this)}
ref={scope => {
this.dateObj1 = scope;
}}
/>
<DatePickerComponent
value={this.dateValue}
change={this.onKeyPressBtwn.bind(this)}
ref={scope => {
this.dateObj2 = scope;
}}
/>
</div>
);
}
}
Please refer the below sample for more details.
Sample:https://stackblitz.com/edit/react-rv3phk?file=index.js
Also please refer the below UG Documentation link,
https://ej2.syncfusion.com/react/documentation/query-builder/getting-started
Conclusion
I hope you enjoyed learning how to add custom operator for Query Builder in React.
You can refer to our React Query Builder feature tour page to know about its other groundbreaking feature representations and documentation, and how to quickly get started for configuration specifications. You can also explore our React Query Builder Example to understand how to create and manipulate data.
For current customers, you can check out our components from the License and Downloads page. If you are new to Syncfusion, you can try our 30-day free trial to check out our other controls.
If you have any queries or require clarifications, please let us know in the comments section below. You can also contact us through our support forums, Direct-Trac, or feedback portal. We are always happy to assist you!
