How to Add Custom Operator for Query Builder in React?
This article explains how to add a custom operator for React React Querybuilder.
You can add the required operator for any column by using the operators property. You can add a custom 'between' operator for the Date type column in React QueryBuilder using a value template. We have prepared a sample in which the Hire Date column has a 'between' operator for the Date type with a Date Picker as the value. Please check the code snippet below.
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>
);
}
}
Refer to the working sample for additional details and implementation: Sample
Also please refer the below UG Documentation link,
https://ej2.syncfusion.com/react/documentation/query-builder/getting-started
Conclusion
We hope you enjoyed learning how to add a custom operator for the 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, BoldDesk Support, or feedback portal. We are always happy to assist you!
