HelpBot Assistant

How can I help you?

Columns in Angular Query builder component

26 Feb 202613 minutes to read

Column definitions define 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 will be determined from the first record of the dataSource.

Labels

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

Operators

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

Operators 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 a 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 the two-specific value. Date Number
notbetween Checks whether the value is not between the two-specific value. Date Number
in Checks whether the value is one of the specific values. String Number
notin Checks whether the value is not in the specific values. String Number

Step

The Query Builder allows you to set the step values to the number fields. So that you can easily access the numeric textbox. Use the step property, to set the step value for number values.

Format

The Query Builder formats date and number values. Use the format property to format date and number values.

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 display errors for invalid fields while using the validateFields method. To enable validation in the query builder , set the allowValidation to true. Column fields are validated after setting allowValidation as to true. So, you should manually configure the validation for Operator and, Value fields through validation.

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.