How can I help you?
Data binding in Angular Query builder component
26 Feb 202624 minutes to read
The Query Builder uses DataManager to support both local and remote data sources. Assign the dataSource property with either a DataManager instance or a JavaScript object array.
Local data
Bind local data by assigning a JavaScript object array to the dataSource property. Alternatively, create a DataManager instance with local data.
import { NgModule } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
import { QueryBuilderModule } from '@syncfusion/ej2-angular-querybuilder'
import { enableRipple } from '@syncfusion/ej2-base'
import { Component, OnInit } from '@angular/core';
import { RuleModel } from '@syncfusion/ej2-angular-querybuilder';
import { employeeData } from './datasource';
@Component({
imports: [
QueryBuilderModule,
],
standalone: true,
selector: 'app-root',
template: `<!-- To render Query Builder. -->
<ejs-querybuilder #querybuilder width="70%" [dataSource]="data" [rule]="importRules">
<e-columns>
<e-column field="EmployeeID" label="Employee ID" type="number"></e-column>
<e-column field="FirstName" label="First Name" type="string"></e-column>
<e-column field="TitleOfCourtesy" label="Title Of Courtesy" type="boolean" [values]="values"></e-column>
<e-column field="Title" label="Title" type="string"></e-column>
<e-column field="HireDate" label="Hire Date" type="date" format="dd/MM/yyyy"></e-column>
<e-column field="Country" label="Country" type="string"></e-column>
<e-column field="City" label="City" type="string"></e-column>
</e-columns>
</ejs-querybuilder>`
})
export class AppComponent implements OnInit {
public data?: Object[];
public importRules?: RuleModel;
public values: string[] = ['Mr.', 'Mrs.'];
ngOnInit(): void {
this.data = employeeData;
this.importRules = {
'condition': 'and',
'rules': [{
'label': 'Employee ID',
'field': 'EmployeeID',
'type': 'number',
'operator': 'equal',
'value': 1
},
{
'label': 'Title',
'field': 'Title',
'type': 'string',
'operator': 'equal',
'value': 'Sales Manager'
}]
};
}
}import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));By default,
DataManagerusesJsonAdaptorfor local data-binding.
Remote data
Bind remote data by assigning a DataManager instance configured with a service endpoint to the dataSource property. Provide the endpoint URL to enable communication with the remote data source.
import { NgModule } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
import { QueryBuilderModule } from '@syncfusion/ej2-angular-querybuilder'
import { enableRipple } from '@syncfusion/ej2-base'
import { Component, OnInit } from '@angular/core';
import { DataManager, ODataAdaptor } from '@syncfusion/ej2-data';
@Component({
imports: [
QueryBuilderModule
],
standalone: true,
selector: 'app-root',
template: `<!-- To render Query Builder. -->
<ejs-querybuilder #querybuilder width="70%" [dataSource]="data" [rule]="importRules">
<e-columns>
<e-column field="EmployeeID" label="Employee ID" type="number"></e-column>
<e-column field="FirstName" label="First Name" type="string"></e-column>
<e-column field="Country" label="Country" type="string"></e-column>
<e-column field="Designation" label="Designation" type="string"></e-column>
</e-columns>
</ejs-querybuilder>`
})
export class AppComponent implements OnInit {
public data?: DataManager;
importRules: { condition: string; rules: ({ label: string; field: string; type: string; operator: string; value: number; } | { label: string; field: string; type: string; operator: string; value: string; })[]; } | undefined;
values: any;
ngOnInit(): void {
this.data = new DataManager({
url: 'https://services.syncfusion.com/angular/production/api/Employees/',
adaptor: new ODataAdaptor(),
});
this.importRules = {
'condition': 'and',
'rules': [{
'label': 'Employee ID',
'field': 'EmployeeID',
'type': 'number',
'operator': 'equal',
'value': 1
},
{
'label': 'Designation',
'field': 'Designation',
'type': 'string',
'operator': 'equal',
'value': 'Developer'
}]
};
}
}import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));By default,
DataManagerusesODataAdaptorfor remote data-binding.
Binding with OData services
OData is a standardized protocol for data consumption and creation. Retrieve data from OData services using the DataManager. The following example demonstrates remote data binding with OData.
import { NgModule } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
import { QueryBuilderModule } from '@syncfusion/ej2-angular-querybuilder'
import { enableRipple } from '@syncfusion/ej2-base'
import { Component, OnInit } from '@angular/core';
import { DataManager, ODataAdaptor } from '@syncfusion/ej2-data';
@Component({
imports: [
QueryBuilderModule
],
standalone: true,
selector: 'app-root',
template: `<!-- To render Query Builder. -->
<ejs-querybuilder #querybuilder width="70%" [dataSource]="data" [rule]="importRules">
<e-columns>
<e-column field="EmployeeID" label="Employee ID" type="number"></e-column>
<e-column field="FirstName" label="First Name" type="string"></e-column>
<e-column field="TitleOfCourtesy" label="Title Of Courtesy" type="boolean" [values]="values"></e-column>
<e-column field="Title" label="Title" type="string"></e-column>
<e-column field="HireDate" label="Hire Date" type="date" format="dd/MM/yyyy"></e-column>
<e-column field="Country" label="Country" type="string"></e-column>
<e-column field="City" label="City" type="string"></e-column>
</e-columns>
</ejs-querybuilder>`
})
export class AppComponent implements OnInit {
public data?: DataManager;
public values: string[] = ['Mr.', 'Mrs.'];
importRules: { condition: string; rules: ({ label: string; field: string; type: string; operator: string; value: number; } | { label: string; field: string; type: string; operator: string; value: string; })[]; } | undefined;
ngOnInit(): void {
this.data = new DataManager({
url: 'https://services.syncfusion.com/angular/production/api/Employees/',
adaptor: new ODataAdaptor(),
crossDomain: true
});
this.importRules = {
'condition': 'and',
'rules': [{
'label': 'Employee ID',
'field': 'EmployeeID',
'type': 'number',
'operator': 'equal',
'value': 1
},
{
'label': 'Title',
'field': 'Title',
'type': 'string',
'operator': 'equal',
'value': 'Sales Manager'
}]
};
}
}import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));Binding with OData v4 services
OData v4 is an improved version of the OData protocol. The DataManager supports OData v4 services for advanced data retrieval and consumption. To bind OData v4 services, use the ODataV4Adaptor. For detailed information, refer to the OData v4 specification.
import { NgModule, OnInit } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
import { QueryBuilderModule } from '@syncfusion/ej2-angular-querybuilder'
import { enableRipple } from '@syncfusion/ej2-base'
import { Component } from '@angular/core';
import { DataManager, ODataV4Adaptor } from '@syncfusion/ej2-data';
@Component({
imports: [
QueryBuilderModule
],
standalone: true,
selector: 'app-root',
template: `<!-- To render Query Builder. -->
<ejs-querybuilder #querybuilder width="70%" [dataSource]="data" [rule]="importRules">
<e-columns>
<e-column field="EmployeeID" label="Employee ID" type="number"></e-column>
<e-column field="FirstName" label="First Name" type="string"></e-column>
<e-column field="TitleOfCourtesy" label="Title Of Courtesy" type="boolean" [values]="values"></e-column>
<e-column field="Title" label="Title" type="string"></e-column>
<e-column field="HireDate" label="Hire Date" type="date" format="dd/MM/yyyy"></e-column>
<e-column field="Country" label="Country" type="string"></e-column>
<e-column field="City" label="City" type="string"></e-column>
</e-columns>
</ejs-querybuilder>`
})
export class AppComponent implements OnInit {
public importRules: any = [];
public data?: DataManager;
public values: string[] = ['Mr.', 'Mrs.'];
ngOnInit(): void {
this.data = new DataManager({
url: 'https://services.odata.org/V4/Northwind/Northwind.svc/Orders/',
adaptor: new ODataV4Adaptor
});
this.importRules = {
'condition': 'and',
'rules': [{
'label': 'Employee ID',
'field': 'EmployeeID',
'type': 'number',
'operator': 'equal',
'value': 1
},
{
'label': 'Title',
'field': 'Title',
'type': 'string',
'operator': 'equal',
'value': 'Sales Manager'
}]
};
}
}import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));Web API
You can use WebApiAdaptor to bind query builder with Web API created using OData endpoint.
import { Component } from '@angular/core';
import { DataManager, WebApiAdaptor } from '@syncfusion/ej2-data';
@Component({
selector: 'app-root',
template: `<!-- To render Query Builder. -->
<ejs-querybuilder #querybuilder width="70%" [dataSource]="data" [rule]="importRules">
<e-columns>
<e-column field="EmployeeID" label="Employee ID" type="number"></e-column>
<e-column field="FirstName" label="First Name" type="string"></e-column>
<e-column field="TitleOfCourtesy" label="Title Of Courtesy" type="boolean" [values]="values"></e-column>
<e-column field="Title" label="Title" type="string"></e-column>
<e-column field="HireDate" label="Hire Date" type="date" format="dd/MM/yyyy"></e-column>
<e-column field="Country" label="Country" type="string"></e-column>
<e-column field="City" label="City" type="string"></e-column>
</e-columns>
</ejs-querybuilder>`
})
export class AppComponent implements OnInit {
public data: DataManager;
ngOnInit(): void {
this.data = new DataManager({
url: 'api/OrderAPI',
adaptor: new WebApiAdaptor
});
this.importRules = {
'condition': 'and',
'rules': [{
'label': 'Employee ID',
'field': 'EmployeeID',
'type': 'number',
'operator': 'equal',
'value': 1
},
{
'label': 'Title',
'field': 'Title',
'type': 'string',
'operator': 'equal',
'value': 'Sales Manager'
}]
};
}
}Data Manager
You can use the created conditions in DataManager through the getPredicate method. This method creates predicates which is used as conditions in DataManager.
import { NgModule } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
import { QueryBuilderModule } from '@syncfusion/ej2-angular-querybuilder'
import { enableRipple } from '@syncfusion/ej2-base'
import { CommonModule } from '@angular/common';
import { Component, OnInit, ViewChild } from '@angular/core';
import { RuleModel, QueryBuilderComponent } from '@syncfusion/ej2-angular-querybuilder';
import { employeeData } from './datasource';
import { DataManager, Query } from '@syncfusion/ej2-data';
@Component({
imports: [
QueryBuilderModule, CommonModule
],
standalone: true,
selector: 'app-root',
template: `<!-- To render Query Builder. -->
<ejs-querybuilder #querybuilder width="70%" [dataSource]="data" [rule]="importRules">
<e-columns>
<e-column field="EmployeeID" label="Employee ID" type="number"></e-column>
<e-column field="FirstName" label="First Name" type="string"></e-column>
<e-column field="TitleOfCourtesy" label="Title Of Courtesy" type="boolean" [values]="values"></e-column>
<e-column field="Title" label="Title" type="string"></e-column>
<e-column field="HireDate" label="Hire Date" type="date" format="dd/MM/yyyy"></e-column>
<e-column field="Country" label="Country" type="string"></e-column>
<e-column field="City" label="City" type="string"></e-column>
</e-columns>
</ejs-querybuilder>
<button class="e-btn e-primary e-qb-button" (click)="refreshTable()" >Get Data</button>
<table id='datatable'class='e-table'>
<tr><th>EmployeeID</th><th>Title</th><th>City</th></tr>
<tr *ngFor="let item of items">
<td></td><td></td><td></td>
</tr>
</table>`
})
export class AppComponent implements OnInit {
public data?: Object[];
public importRules?: RuleModel;
@ViewChild('querybuilder')
public qryBldrObj?: QueryBuilderComponent;
public values: string[] = ['Mr.', 'Mrs.'];
public items?: Object[]| any;
public dataManagerQuery!:Query;
ngOnInit(): void {
this.data = employeeData ;
this.importRules = {
'condition': 'and',
'rules': [{
'label': 'Employee ID',
'field': 'EmployeeID',
'type': 'number',
'operator': 'equal',
'value': 1
}]
};
}
refreshTable(): void {
this.dataManagerQuery = new Query().select(['EmployeeID', 'Title', 'City']).where(this.qryBldrObj!.getPredicate(this.qryBldrObj!.rule)).take(8);
this.items = [];
this.items = new DataManager(<JSON[]>this.data).executeLocal(this.dataManagerQuery);
}
}import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));Complex Data Binding
Complex Data Binding allows you to create subfield for columns. To implement complex data binding, either bind the complex data in nested columns or specify complex data source and separator must be given in querybuilder.
In the following sample, complex data was bound in nested columns.
import { BrowserModule } from '@angular/platform-browser'
import { NgModule } from '@angular/core'
import { QueryBuilderModule } from '@syncfusion/ej2-angular-querybuilder'
import { DropDownListModule } from '@syncfusion/ej2-angular-dropdowns'
import { CheckBoxModule, RadioButtonModule } from '@syncfusion/ej2-angular-buttons'
import { DropDownButtonModule } from '@syncfusion/ej2-angular-splitbuttons'
import { Component, ViewChild, OnInit } from '@angular/core';
import { QueryBuilderComponent } from '@syncfusion/ej2-angular-querybuilder';
import { RuleModel, RuleChangeEventArgs, ColumnsModel } from '@syncfusion/ej2-querybuilder';
import { getComponent} from '@syncfusion/ej2-base';
import { RadioButtonComponent } from '@syncfusion/ej2-angular-buttons';
@Component({
imports: [
QueryBuilderModule,
CheckBoxModule,
DropDownListModule,
DropDownButtonModule,
RadioButtonModule
],
standalone: true,
selector: 'app-root',
templateUrl: `template-driven.html`
})
export class AppComponent implements OnInit {
@ViewChild('querybuilder') qryBldrObj: QueryBuilderComponent | undefined;
public importRules?: RuleModel;
public columns1?: ColumnsModel[];
public columns2?: ColumnsModel[];
public columns3?: ColumnsModel[];
ngOnInit(): void {
this.importRules = {
condition: 'and',
rules: [{
label: 'ID',
field: 'Employee.ID',
type: 'string',
operator: 'equal',
value: 0
},
{
label: 'Last Name',
field: 'Name.LastName',
type: 'string',
operator: 'contains',
value: 'malan'
},
{
condition: 'or',
rules: [{
label: 'City',
field: 'Country.State.City',
operator: 'startswith',
type: 'string',
value: 'U'
},
{
label: 'Region',
field: 'Country.Region',
operator: 'endswith',
type: 'string',
value: 'c'
},
{
label: 'Name',
field: 'Country.Name',
operator: 'isnotempty'
}]
}]
};
this.columns1 = [
{ field: 'ID', label: 'ID', type: 'number'},
{ field: 'DOB', label: 'Date of birth', type: 'date'},
{ field: 'HireDate', label: 'Hire Date', type: 'date'},
{ field: 'Salary', label: 'Salary', type: 'number'},
{ field: 'Age', label: 'Age', type: 'number'},
{ field: 'Title', label: 'Title', type: 'string'}
]
this.columns2 = [
{ field: 'FirstName', label: 'First Name', type: 'string'},
{ field: 'LastName', label: 'Last Name', type: 'string'}
]
this.columns3 = [
{ field: 'State', label: 'State', columns : [
{ field: 'City', label: 'City', type: 'string'},
{ field: 'Zipcode', label: 'Zip Code', type: 'number'}] },
{ field: 'Region', label: 'Region', type: 'string'},
{ field: 'Name', label: 'Name', type: 'string'}
]
}
onReset(e: Event): void {
this.qryBldrObj?.reset();
}
onSetSqlRules(e:Event): void {
this.qryBldrObj?.setRulesFromSql("Employee.ID = 0 AND Name.LastName LIKE ('%malan%') AND (Country.State.City LIKE ('U%') AND Country.Region LIKE ('%c') AND Country.Name IS NOT EMPTY)");
}
onSetRules(e:Event): void {
this.qryBldrObj?.setRules((this as any).importRules);
}
}import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));