How to add extra textbox fields to Syncfusion QueryBuilder using value template

When working with the Syncfusion QueryBuilder component, you may encounter scenarios where you need to add additional fields that are not directly tied to the columns in your data source. This can be achieved by utilizing the databound event to inject custom templates for all columns. Below is a guide on how to add extra textbox fields to the QueryBuilder without using a column.

Prerequisites

Ensure you have the Syncfusion QueryBuilder module installed in your project. If not, you can get it through the Syncfusion package from npm.

Step-by-Step Guide

1. Define the QueryBuilder Component

   Start by defining the QueryBuilder component in your HTML template. Assign it a databound event handler and a
   datasource.

   <div class="col-lg-12 control-section">
     <ejs-querybuilder #querybuilder class="row" (dataBound)="dataBound()" (actionBegin)="actionBegin($event)" [dataSource]="dataSource" [rule]="importRules">
     </ejs-querybuilder>
   </div>
   

2. Create a Custom Template

   Define a custom template using ng-template that includes the additional textbox fields you want to add.

   <ng-template #template let-data>
     <div style="display: flex; margin-left: 12px;">
       <ejs-textbox id="{{data.ruleID}}_textbox1" [value]="data.rule.custom.value1" (change)="valueChange1($event)" floatLabelType="Auto"></ejs-textbox>
       <ejs-textbox style="margin-left: 12px;" id="{{data.ruleID}}_textbox2" [value]="data.rule.custom.value2" (change)="valueChange2($event)" floatLabelType="Auto"></ejs-textbox>
     </div>
   </ng-template>
   

3. Implement the databound Event Handler

   In your component’s TypeScript file, implement the databound event handler to apply the custom template to the desired columns.

   dataBound(args: any): void {
       let columns = this.qryBldrObj.columns;
       for (let i: number = 0; i < columns.length; i++) {
           if (columns[i].type == "string") {
               columns[i].template = this.template as any;
           }
       }
   }
   

4. Handle the actionBegin Event

   Implement the actionbegin event handler to initialize the custom values when a new rule is added.

   actionBegin(args: ActionEventArgs): void {
       if (args.requestType === "value-template-initialize") {
           args.rule.operator = 'equal';
           if (isNullOrUndefined((args.rule as any).custom)) {
               (args.rule as any).custom = { value1: '', value2: ''};
           }
       }
   }
   

5. Run and Test

   After implementing the above steps, run your application and test the QueryBuilder to ensure that the additional textbox fields appear as expected.

Demo

To see a live example of the implementation, visit the following demo link: Syncfusion QueryBuilder Custom Template Demo

Additional References

• Syncfusion QueryBuilder Documentation: QueryBuilder Component
• Angular Documentation: Angular Templates

By following these steps, you can successfully add additional textbox fields to the Syncfusion QueryBuilder component without relying on the columns in your data source.