Query Builder - Radio buttons for boolean value do not always get set properly

Question

Hello,When I set a value for a boolean field in the change event, such as wanting it to default to false when a boolean field is selected, the radio buttons in the value control do not seem to get updated properly. Please see the following sample with these steps to reproduce:Add a new condition or edit an existing oneSelect a boolean field (i.e. Is VIP) from the field dropdownObserve the state of the radio buttons and the exported SQL stringThe exported SQL string will be correct, but the radio buttons do not reflect the value of false that is set during the change event.https://stackblitz.com/edit/angular-frdbnf-28rczb?file=src%2Fapp.component.ts,src%2Fapp.component.html  Please let me know if there is a workaround for this.Thank you,KS

YuvanShankar Arunagiri · Answer

Hi KS,

We can reproduce your reported issue on our end. So, we have confirmed this as an issue and logged a bug report for it. We will include the fix for this issue in the upcoming main release scheduled for the last week of March 2024.

You will be informed regarding this once the fix is published.

Disclaimer: “Inclusion of this solution in the weekly release may change due to other factors, including but not limited to QA checks and work reprioritization.”

Note: Once we have fixed your reported issue, we will share the custom NuGet package for your use.

Regards,

YuvanShankar A

Keerthikaran Venkatachalam · Answer

Hi
KS,We are glad to
announce that our weekly patch release (25.1.38) has been rolled out. So, we
suggest you upgrade our Syncfusion packages to our latest version to resolve
this issue on your end (25.1.38).You can use the beforeChange
event of the QueryBuilder to change the rule value. Please refer to the below
code snippet and sample.

<ejs-querybuilder
     
  id="querybuilder"
      #querybuilder
      class="row"
      (beforeChange)="beforeChange($event)"
     
  (ruleChange)="queryChanged($event)"
     
  [dataSource]="dataSource"
      [allowValidation]="true"
    >
  ….
    beforeChange(args: any):
  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;
          var rule =
  this.qryBldrObj.getRule(args.ruleID);
          if (args.selectedField ===
  "VIP") {
            rule.value = false;
          }
        }
      }
      if (args.type ===
  'operator') {
        if (ruleElem) {
        }
      }
    }

Sample link: https://stackblitz.com/edit/angular-z54gfd-t8cxw4?file=src%2Fapp.component.ts
Please
let us know if you need any further assistance on this.Regards,KeerthiKaran
K V