Adding operator for each condition

[Tanvi]

How can I add operators at condition level? Currently the configuration in the document is only for the group and is applicable for all the conditions in the same group. Need help with this.

[Keerthikaran Venkatachalam]

Hi Tanvi,

We have checked the reported query and prepared the sample. By using the rule template and header template of QueryBuilder, you can achieve your requirements.

The rule template is a powerful feature that enables developers to customize the user interface for displaying rules in their application. It allows for the creation of a custom template that can include a combination of static HTML and web controls, giving developers greater control over the appearance and functionality of their application.

The header template is a feature that enables developers to customize the user interface for the headers, which displays the connector used to join rules within a group as well as options to insert and delete groups or rules.

Please refer to the code snippet and sample below.

      <ejs-querybuilder id="querybuilder" [columns]="filter" headerTemplate="headerTemplate" (actionBegin)="actionBegin($event)"  (dataBound)="dataBound()" #querybuilder width="100%" [rule]="importRules" (created)="updateRule()" (ruleChange)="updateRule()">

        <ng-template #headerTemplate let-data>

          <div class="e-groupheader">

            <ejs-radiobutton class='e-custom-group-btn' id="{{data.ruleID}}_radio1" name="{{data.ruleID}}_andor" label="AND"  value="and" [checked]="data.condition == 'and'" (change)="grpConditionChange($event)"></ejs-radiobutton>

            <ejs-radiobutton class='e-custom-group-btn' id="{{data.ruleID}}_radio2" name="{{data.ruleID}}_andor" label="OR" value="or" [checked]="data.condition == 'or'" (change)="grpConditionChange($event)"></ejs-radiobutton>

          </div>

        </ng-template>

        <ng-template #ruleTemplate let-data>

          <div>

            <div *ngIf="data.rule.custom.isRule===true" class="e-rules">

              <div class="e-rule-header">

                <ejs-radiobutton id="{{data.ruleID}}_rulerb1" class="e-and-condition" name="{{data.ruleID}}_andor" label="AND" value="and" [checked]="data.group.condition == 'and'" (change)="ruleConditionChange($event)"></ejs-radiobutton>

                <ejs-radiobutton id="{{data.ruleID}}_rulerb2" class="e-or-condition" name="{{data.ruleID}}_andor" label="OR" value="or" [checked]="data.group.condition == 'or'" (change)="ruleConditionChange($event)"></ejs-radiobutton>

              </div>

            </div>

          </div>

        </ng-template>

      </ejs-querybuilder>

Sample link: https://stackblitz.com/edit/angular-65wym4-bdna4i?file=app.component.ts

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

Regards,

KeerthiKaran K V