Columns in Angular Query Builder UI

1 Sep 202616 minutes to read

Column definitions specify the schema for the dataSource and control how the Query Builder renders and processes data. All Query Builder operations—such as creating/deleting conditions and groups—are based on these definitions. The field property maps columns to data source values.

If the column field property is not specified, the corresponding column values will be empty in the Query Builder.

Auto generation

The columns are automatically generated when the columns declaration is empty or undefined while initializing the query builder. All the columns in the dataSource are bound as the query builder columns.

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 { employeeData } from './datasource';

@Component({
imports: [
        
        QueryBuilderModule,
    ],


standalone: true,
    selector: 'app-root',
    template: `<!-- To render Query Builder. -->
               <ejs-querybuilder #querybuilder width="70%" [dataSource]="data">
               </ejs-querybuilder>`
})

export class AppComponent implements OnInit {

    public data?: Object[];
    ngOnInit(): void {
        this.data = employeeData;
    }
}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));

When columns are auto-generated, the column type is inferred from the first record of the dataSource. If the first record contains mixed-type or null values for a field, the inferred type may not match the intended type, so explicitly defining the columns is recommended for such data sources.

Labels

By default, the Query Builder displays the column label from the field property. To customize the label, set the label property.

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

Operators

Define available operators for each column using the operators property. The following table lists all available operators and their supported data types:

Operator Description Supported Types
startswith Checks whether the value begins with the specified value. String
endswith Checks whether the value ends with the specified value. String
contains Checks whether the value contains the specified value. String
equal Checks whether the value is equal to the specified value. String, Number, Date, Boolean
notequal Checks whether the value is not equal to the specified value. String, Number, Date, Boolean
greaterthan Checks whether the value is greater than the specified value. Date, Number
greaterthanorequal Checks whether the value is greater than or equal to the specified value. Date, Number
lessthan Checks whether the value is less than the specified value. Date, Number
lessthanorequal Checks whether the value is less than or equal to the specified value. Date, Number
between Checks whether the value is between two specified values. Date, Number
notbetween Checks whether the value is not between two specified values. Date, Number
in Checks whether the value is one of the specified values. String, Number
notin Checks whether the value is not in the specified values. String, Number
isempty Checks whether the value is empty. String
isnotempty Checks whether the value is not empty. String
isnull Checks whether the value is null. String, Number, Date, Boolean
isnotnull Checks whether the value is not null. String, Number, Date, Boolean

For the between and notbetween operators, the rule value must be an array of two values specifying the lower and upper bounds (for example, [10, 100] or ['2022-01-01', '2022-12-31']).

To restrict the operators available for a specific column, define the operators array on that column:

<e-column field="TaskID" label="Task ID" type="number" [operators]="['equal', 'notequal', 'greaterthan']"></e-column>

Step

The Query Builder allows you to set the step value for numeric columns, which controls the increment of the numeric textbox editor used to enter the value. Use the step property to set the step value for numeric columns.

<e-column field="TaskID" label="Task ID" type="number" [step]="2"></e-column>

Format

The Query Builder formats date and number values. Use the format property to format date and number values. For date columns, the value uses standard date format tokens (for example, dd/MM/yyyy, yyyy-MM-dd, or MM/dd/yyyy). For numeric columns, the value uses numeric format strings (for example, n2 for two decimal places, c2 for currency with two decimal places, or p0 for a percentage with no decimal places).

<e-column field="HireDate" label="Hire Date" type="date" format="dd/MM/yyyy"></e-column>
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" step="10" [operators]="employeeOperators"></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 employeeOperators?: Object[];
values: any;
    ngOnInit(): void {
        this.data = employeeData;
        this.importRules = {
        'condition': 'and',
        'rules': [{
            'label': 'Employee ID',
            'field': 'EmployeeID',
            'type': 'number',
            'operator': 'equal',
            'value': 1001
        },
        {
            'label': 'Hire Date',
            'field': 'HireDate',
            'type': 'date',
            'operator': 'equal',
            'value': '07/05/1991'
        }]
    };
    this.employeeOperators =  [
        { value: 'equal', key: 'Equal' },
        { value: 'notequal', key: 'Not Equal' },
        { value: 'in', key: 'In' },
        { value: 'notin', key: 'Not In' }
    ];
    }
}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));

Validations

Validation allows you to validate the conditions and it displays errors for invalid fields while using the validateFields method. To enable validation in the Query Builder, set the allowValidation property to true. Column fields are validated after setting allowValidation to true, so you should manually configure the validation for the Operator and Value fields through the validation property.

The validation object is configured per column and supports the following properties:

Property Type Description
isRequired boolean Marks the Operator and Value fields as required for the column.
min number Sets the minimum allowed value for numeric columns.
max number Sets the maximum allowed value for numeric columns. 
public validateRule: { [key: string]: boolean } = { isRequired: true };
<e-column field="EmployeeID" label="Employee ID" type="number" validation="validateRule"></e-column>
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, ViewChild, OnInit } from '@angular/core';
import { RuleModel, QueryBuilderComponent } 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" allowValidation="true">
                <e-columns>
                  <e-column field="EmployeeID" label="Employee ID" type="number" validation="validateRule"></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)="validate()" >Validate Field</button>`
})

export class AppComponent implements OnInit {
    public data?: Object[];
    public importRules?: RuleModel;
     @ViewChild('querybuilder')
    public qryBldrObj?: QueryBuilderComponent;
    public validateRule: { [key: string]: Boolean } = { isRequired: true };
    public values: string[] = ['Mr.', 'Mrs.'];
    ngOnInit(): void {
        this.data = employeeData;
    }
    validate(): void {
        this.qryBldrObj!.validateFields();
    }

}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));

Set isRequired validation for Operator and Value fields.

Set max, min values for number values.