We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date

Query builder custom value selection


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.



5 Replies

YA YuvanShankar Arunagiri Syncfusion Team January 9, 2023 04:32 PM UTC

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


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


      <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>



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




<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>






onOpenDialog(args) {

        this.valueChangedId = args.ruleID;



    valueChange(args) {

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




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. 


YuvanShankar A

SS Sanjay Singh replied to YuvanShankar Arunagiri January 12, 2023 07:54 AM UTC

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.



YA YuvanShankar Arunagiri Syncfusion Team January 12, 2023 02:48 PM UTC


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.

SS Sanjay Singh January 12, 2023 04:10 PM UTC


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

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



YA YuvanShankar Arunagiri Syncfusion Team January 17, 2023 11:06 AM UTC

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>





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

Live Chat Icon For mobile
Up arrow icon