How to Add Placeholder to Operator Field in JavaScript Query Builder?

This article explains how to add a placeholder to the operator field in the JavaScript Query Builder. When working with the Syncfusion JavaScript Query Builder component, you may want to display a placeholder for the operator field until an explicit change is made by the user. This can be achieved by handling the onChange event and manipulating the DOM elements accordingly. Below is a guide on how to implement this functionality.

Define the Query Builder Component

In your component’s HTML file, define the Query Builder component and set the operatorModel property to include a placeholder.

<div class="col-lg-12 control-section">
  <ejs-querybuilder #querybuilder class="row" [dataSource]="dataSource" [operatorModel]="{placeholder: 'Select a Operator'}" [valueModel]="{numericTextBoxModel: {placeholder: 'Enter the value', value: null}, textBoxModel: {placeholder: 'Enter the value', value: null}}" (change)="onChange($event)">
  </ejs-querybuilder>
</div>

Handling Field and Operator Changes

To control the display of placeholders in the operator field, it is necessary to address two types of modifications: changes to the field itself and changes to the operator.

Field Change

When a field is changed, you want to clear the operator and hide the value input until a new operator is selected.
Here’s how you can do it:

onChange(args) {
    if (args.type === "field") {
        let ruleId: any = this.qryBldrObj.element.id + '_' + args.ruleID;
        let rulObj: any = document.getElementById(ruleId);
        let valObj: any = rulObj.getElementsByClassName('e-rule-value')[0];
        let oprObj: any = rulObj.getElementsByClassName('e-rule-operator')[0];
        let rule = this.qryBldrObj.getRule(oprObj);
        if (isNullOrUndefined(rule.custom)) {
            valObj.classList.add('e-hide');
            let opr = getComponent(oprObj.querySelector('input'), 'dropdownlist') as any;
            opr.clear();
            rule.operator = "";
            rule.value = "";
        }
    }
    // ... rest of the code
}

Operator Change

When an operator is selected, you want to show the value input again and set a custom flag to indicate that the operator has been explicitly changed:

onChange(args) {
    // ... previous code
    else if (args.type === "operator") {
        let ruleId: any = this.qryBldrObj.element.id + '_' + args.ruleID;
        let rulObj = document.getElementById(ruleId);
        let valObj = rulObj.getElementsByClassName('e-rule-value')[0];
        valObj.classList.remove('e-hide');
        this.qryBldrObj.getRule(rulObj).custom = {};
    }
    // ... rest of the code
}

Demo

To see a live demonstration of the above implementation, please visit the following sample link: Query-builder placeholder for Operator

Additional References

• Syncfusion Query Builder Documentation: QueryBuilderComponent
• Syncfusion API Reference: QueryBuilder API
• JavaScript getComponent Method: getComponent

Please note that the code snippets provided are based on a hypothetical implementation and may require adjustments to work within your specific application context.

Conclusion

We hope you enjoyed learning how to add a placeholder to the operator field in the JavaScript Query Builder.

You can refer to our Angular QueryBuilder feature tour page to learn about its other groundbreaking feature representations and documentation, as well as how to quickly get started with configuration specifications. You can also explore our Angular QueryBuilder example to understand how to create and manipulate data.

For current customers, you can check out our components on the License and Downloads page. If you are new to Syncfusion, you can try our 30-day free trial to explore 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!