Query builder custom value selection

[Sanjay Singh]

Hello,

We are trying to implement a functionality to select custom value for a condition.

This custom value should be picked from a search pop-up/dialog.

For example : consider below screenshot. 

The "search name" button will open a pop-up/dialog box to search name and when we select a name from search result list, it should be added as  a condition value in below screen.

Please let me know if this is feasible with the component.

Thanks,

Sanjay

[YuvanShankar Arunagiri]

Hi Sanjay,

We have taken a look at your reported query and have prepared a sample solution for you based on your specific requirement. Please see the attached code snippet and sample link for reference.

To address your question, you can use the valueTemplate to render any control in the value field. Then, you can use the value change event of that control to set the selected value to the query builder rule using the getRule method of the query builder.

API link: https://ej2.syncfusion.com/angular/documentation/api/query-builder/#getrule

[app.component.html]:

<ejs-querybuilder #querybuilder class="row" [dataSource]="dataSource">

    <e-columns>

      <e-column field="EmployeeID" label="Employee ID" type="number"></e-column>

      <e-column field="FirstName" label="First Name" type="string">

        <ng-template #template let-data>

          <button ejs-button cssClass="e-primary" [isPrimary]="true" (click)="onOpenDialog(data)">Search Name</button>

      </ng-template>

      </e-column>

      <e-column field="City" label="City" type="string"></e-column>

    </e-columns>

  </ejs-querybuilder>

………………………………………

<ejs-dialog id='dialog' #dialog showCloseIcon='true' heigth="400px" width='435px' [visible]='visible'>

    <ng-template #content>

        <div class="dialogContent">

          <ejs-listbox [dataSource]='data' allowFiltering="true" (change)="valueChange($event)"></ejs-listbox>

        </div>

    </ng-template>

  </ejs-dialog>

 

[app.component.ts]:

onOpenDialog(args) {

        this.valueChangedId = args.ruleID;

        this.dialog.show();

    }

    valueChange(args) {

        this.qryBldrObj.getRule(this.valueChangedId.split("_0_")[1]).value = args.value[0];

        console.log(this.qryBldrObj.rule.rules);

    }

 

Sample link: https://stackblitz.com/edit/angular-odpf2t?file=src%2Fapp.component.html

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

Regards,

YuvanShankar A

[Sanjay Singh]

Hi Team,

Thank you for the reply.

We are using a "fieldModel" property to populate the columns.

Please advise how to use ng-template to add button after a particular column.

Thanks,

Sanjay

[YuvanShankar Arunagiri]

Sanjay,

The fieldModel property only for setting property to field dropdown, not for customizing the column data. It may cause script error. If we want to add button to particular column, then we need to use value template feature. Please refer to the below sample link.

Sample link: https://stackblitz.com/edit/angular-odpf2t-rsx9z1?file=src%2Fapp.component.html

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

[Sanjay Singh]

Hello,

Sorry my bad, we are using "columns" property.

So how to use "ng-template" when we are using property to define columns.

Thanks,

Sanjay

[YuvanShankar Arunagiri]

Sorry for the delay, Sanjay.

We have prepared the sample based on your requirement. Using the field name of specific column, we can render the button component like shown as below.

<ng-template #inOperatorTemplate let-ruleData>

      <div class="e-rule-value e-value e-custom-value">

        ……………………………………………..

        <div *ngIf="ruleData.rule.field === 'Country'">

        <button ejs-button cssClass="e-primary" content="Button"></button>

        </div>

      </div>

    </ng-template>

 

Sample link: https://stackblitz.com/edit/angular-bzuxxz-q3fmbl?file=app.component.html