How to Implement placeholder for operator field in Syncfusion Angular Query Builder?

3 mins read

When working with the Syncfusion Angular 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 manage the display of placeholders for the operator field, you need to handle two types of changes: when the field changes and when the operator changes.

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

I hope you enjoyed learning how to Implement placeholder for operator field in Syncfusion Angular Query Builder.

You can refer to our Angular QueryBuilder 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 Angular QueryBuilder 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!

Did you find this information helpful?

Yes

Comments (0)