Query Builder - Can the operator dropdown not be populated automatically?

[KS]

Hello,

When a field is selected on a condition within the QueryBuilder, it seems to get set automatically to one of the values (usually Equals in our case). Is it possible to stop the operator dropdown from getting selected automatically and make the user do that?

Thank you,

KS

[Keerthikaran Venkatachalam]

Hi KS,

We have checked your reported query and prepared a sample based on your requirements. Please refer to the code snippet and sample link below.

  <ejs-querybuilder id="querybuilder" #querybuilder class="row" (change)="change($event)" [dataSource]="dataSource">

  </ejs-querybuilder>

….

    change(args): void {

        var ruleElem = document.getElementById("querybuilder_" + args.ruleID);

        if (args.type === "field") {

            if (ruleElem){

                let operDropdown: DropDownList = (getComponent(document.getElementById("querybuilder_" + args.ruleID + "_operatorkey"), 'dropdownlist') as DropDownList);

                operDropdown.value = null;

                var valueElem = ruleElem.querySelector(".e-rule-value");

                valueElem.classList.add("e-hide-value");

            }

        }

        if (args.type === "operator") {

            if (ruleElem){

                var valueElem = ruleElem.querySelector(".e-rule-value");

                valueElem.classList.remove("e-hide-value");

            }

        }

    }

…..

.e-hide-value {

    display: none !important;

}

Sample link: https://stackblitz.com/edit/angular-frdbnf-x1u2xl?file=src%2Fapp.component.ts

Please let us know if you need any further assistance on this.

Regards,

KeerthiKaran K V

[KS]

Hello,

Is there a way for this to work nicely with the validateFields method as well? It seems like the required message for the Operator field is appearing in the top left corner once a Field is selected, when I would expect it to appear below the Operator field.

Here is an updated sample:

https://stackblitz.com/edit/angular-frdbnf-5vfpbw?file=src%2Fapp.component.ts,src%2Fapp.component.html

Please let me kn

[Keerthikaran Venkatachalam]

Hi KS,

We have checked the reported query, and you need to set the rule operator and value as null. However, we have encountered an issue with the tooltip rendering twice in the operator field. We consider this a bug and will include the fix for this issue in the upcoming weekly release scheduled for the first week of February 2024.

change(args): void {

        var ruleElem = document.getElementById("querybuilder_" + args.ruleID);

        if (args.type === "field") {

            if (ruleElem){

                let operDropdown: DropDownList = (getComponent(document.getElementById("querybuilder_" + args.ruleID + "_operatorkey"), 'dropdownlist') as DropDownList);

                operDropdown.value = null;

                var rule = this.qryBldrObj.getRule(args.ruleID);

                rule.operator = null;

                rule.value = null;

                var valueElem = ruleElem.querySelector(".e-rule-value");

                valueElem.classList.add("e-hide-value");

            }

        }

        if (args.type === "operator") {

            if (ruleElem){

                var valueElem = ruleElem.querySelector(".e-rule-value");

                valueElem.classList.remove("e-hide-value");

            }

        }

        this.qryBldrObj.validateFields();

    }

Sample link: https://stackblitz.com/edit/angular-frdbnf-gz8kik?file=src%2Fapp.component.ts

Please let us know if you need any further assistance on this.

Regards,

KeerthiKaran K V

[Keerthikaran Venkatachalam]

Hi KS,

We are glad to announce that our weekly patch release (24.2.5) has been rolled out. We have included the fix for this “Tooltip rendering twice in the operator field while using validateFields method” issue in this release. So, we suggest you upgrade our Syncfusion packages to our latest version to resolve this issue on your end (24.2.5).

Root cause:
The underlying reason for the problem is that we've tightly linked the tooltip component to the controls for the field, operator, and value. The tooltip is created and removed depending on the input values in these controls. As the tooltip is being destroyed when entering any values, we haven't verified whether the tooltip was initialized before rendering it.

Sample link: https://stackblitz.com/edit/angular-frdbnf-um8ofa?file=src%2Fapp.component.ts

Release notes: https://ej2.syncfusion.com/angular/documentation/release-notes/24.2.5?type=all#querybuilder

Package link: https://www.npmjs.com/package/@syncfusion/ej2-angular-querybuilder

Get back to us if you need any further assistance on this.

Regards,

KeerthiKaran K V