Search results

Localization

The Localization library allows you to localize default text content of the Query Builder. The Query Builder component has static text that can be changed to other cultures (Arabic, Deutsch, French, etc.) by defining the locale value and translation object.

The following list of properties and its values are used in the Query Builder.

Locale key words Text
AddGroup Add Group
AddCondition Add Condition
DeleteRule Remove this condition
DeleteGroup Delete group
Edit EDIT
SelectField Select a field
SelectOperator Select operator
StartsWith Starts With
EndsWith Ends With
Contains Contains
Equal Equal
NotEqual Not Equal
LessThan Less Than
LessThanOrEqual Less Than Or Equal
GreaterThan Greater Than
GreaterThanOrEqual Greater Than Or Equal
Between Between
NotBetween Not Between
In In
NotIn Not In
Remove REMOVE
ValidationMessage This field is required
Source
Preview
app.component.ts
app.module.ts
datasource.ts
main.ts
import { Component, OnInit } from '@angular/core';
import { RuleModel } from '@syncfusion/ej2-angular-querybuilder';
import { L10n, setCulture } from '@syncfusion/ej2-base';
import { hardwareData } from './datasource';

setCulture('de-DE');

L10n.load({
    'de-DE': {
        'querybuilder': {
            'AddGroup': 'Gruppe hinzufügen',
            'AddCondition': 'Bedingung hinzufügen',
            'DeleteRule': 'Entfernen Sie diesen Zustand',
            'DeleteGroup': 'Gruppe löschen',
            'Edit': 'BEARBEITEN',
            'SelectField': 'Wählen Sie ein Feld aus',
            'SelectOperator': 'Operator auswählen',
            'StartsWith': 'Beginnt mit',
            'EndsWith': 'Endet mit',
            'Contains': 'Enthält',
            'Equal': 'Gleich',
            'NotEqual': 'Nicht gleich',
            'LessThan': 'Weniger als',
            'LessThanOrEqual': 'Weniger als oder gleich',
            'GreaterThan': 'Größer als',
            'GreaterThanOrEqual': 'Größer als oder gleich',
            'Between': 'Zwischen',
            'NotBetween': 'Nicht zwischen',
            'In': 'Im',
            'NotIn': 'Nicht in',
            'Remove': 'LÖSCHEN',
            'ValidationMessage': 'Dieses Feld wird benötigt',
        }
    }
});
@Component({
    selector: 'app-root',
    template: `<!-- To render Query Builder. -->
               <ejs-querybuilder #querybuilder width="70%" [dataSource]="data" [rule]="importRules" locale="de-DE">
                <e-columns>
                  <e-column field="TaskID" label="Task ID" type="number"></e-column>
                  <e-column field="Name" label="Name" type="string"></e-column>
                  <e-column field="Category" label="Category" type="string"></e-column>
                  <e-column field="SerialNo" label="SerialNo" type="string"></e-column>
                  <e-column field="InvoiceNo" label="InvoiceNo" type="string"></e-column>
                  <e-column field="Status" label="Status" type="string"></e-column>
                </e-columns>
              </ejs-querybuilder>`
})

export class AppComponent implements OnInit {
    public data: Object[];
    public importRules: RuleModel;
    ngOnInit(): void {
        this.data = hardwareData;
        this.importRules = {
        'condition': 'or',
        'rules': [{
            'label': 'Category',
            'field': 'Category',
            'type': 'string',
            'operator': 'equal',
            'value': 'Laptop'
        }]
    };
    }
}
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { QueryBuilderModule } from '@syncfusion/ej2-angular-querybuilder';
import { AppComponent } from './app.component';
import { enableRipple } from '@syncfusion/ej2-base';

enableRipple(true);

/**
 * Module
 */
@NgModule({
    imports: [
        BrowserModule,
        QueryBuilderModule
    ],
    declarations: [AppComponent],
    bootstrap: [AppComponent]
})
export class AppModule { }
/**
 * QueryBuilder datasource
 */
export let employeeData: Object[] = [{
  'EmployeeID': 1,
  'LastName': 'Davolio',
  'FirstName': 'Nancy',
  'Title': 'Sales Representative',
  'TitleOfCourtesy': 'Ms.',
  'Date': '12/10/2018',
  'Address': '507 - 20th Ave. E.\r\nApt. 2A',
  'City': 'Seattle',
  'Region': 'WA',
  'PostalCode': '98122',
  'Country': 'USA'
},
{
  'EmployeeID': 2,
  'LastName': 'Fuller',
  'FirstName': 'Andrew',
  'Title': 'Vice President',
  'TitleOfCourtesy': 'Dr.',
  'Date': '22/06/2018',
  'Address': '908 W. Capital Way',
  'City': 'Tacoma',
  'Region': 'WA',
  'PostalCode': '98401',
  'Country': 'USA'
},
{
  'EmployeeID': 3,
  'LastName': 'Leverling',
  'FirstName': 'Janet',
  'Title': 'Sales Representative',
  'TitleOfCourtesy': 'Ms.',
  'Date': '12/10/2011',
  'Address': '722 Moss Bay Blvd.',
  'City': 'Kirkland',
  'Region': 'WA',
  'PostalCode': '98033',
  'Country': 'USA'
},
{
  'EmployeeID': 4,
  'LastName': 'Peacock',
  'FirstName': 'Margaret',
  'Title': 'Sales Representative',
  'TitleOfCourtesy': 'Mrs.',
  'Date': '01/11/2014',
  'Address': '4110 Old Redmond Rd.',
  'City': 'Redmond',
  'Region': 'WA',
  'PostalCode': '98052',
  'Country': 'USA'
},
{
  'EmployeeID': 5,
  'LastName': 'Buchanan',
  'FirstName': 'Steven',
  'Title': 'Sales Manager',
  'TitleOfCourtesy': 'Mr.',
  'Date': '12/10/2018',
  'Address': '14 Garrett Hill',
  'City': 'London',
  'Region': null,
  'PostalCode':
  'SW1 8JR',
  'Country': 'UK'
},
{
  'EmployeeID': 6,
  'LastName': 'Suyama',
  'FirstName': 'Michael',
  'Title': 'Sales Representative',
  'TitleOfCourtesy': 'Mr.',
  'Date': '01/12/2018',
  'Address': 'Coventry House\r\nMiner Rd.',
  'City': 'London',
  'Region': null,
  'PostalCode': 'EC2 7JR',
  'Country': 'UK'
},
{
  'EmployeeID': 7,
  'LastName': 'King',
  'FirstName': 'Robert',
  'Title': 'Sales Representative',
  'TitleOfCourtesy': 'Mr.',
  'Date': '12/12/2011',
  'Address': 'Edgeham Hollow\r\nWinchester Way',
  'City': 'London',
  'Region': null,
  'PostalCode': 'RG1 9SP',
  'Country': 'UK'
},
{
  'EmployeeID': 8,
  'LastName': 'Callahan',
  'FirstName': 'Laura',
  'Title': 'Inside Sales Coordinator',
  'Date': '12/10/2012',
  'TitleOfCourtesy': 'Ms.',
  'Address': '4726 - 11th Ave. N.E.',
  'City': 'Seattle',
  'Region': 'WA',
  'PostalCode': '98105',
  'Country': 'USA'
},
{
  'EmployeeID': 9,
  'LastName': 'Dodsworth',
  'FirstName': 'Anne',
  'Title': 'Sales Representative',
  'TitleOfCourtesy': 'Ms.',
  'Date': '12/03/2018',
  'Address': '7 Houndstooth Rd.',
  'City': 'London',
  'Region': null,
  'PostalCode': 'WG2 7LT',
  'Country': 'UK'
}];
export let expenseData: Object[]  = [{
    'UniqueId': 'T100001',
    'Category': 'Food',
    'PaymentMode': 'Credit Card',
    'TransactionType': 'Expense',
    'Description': 'Boiled peanuts',
    'Amount': '7',
    'MonthShort': 'Jun',
    'MonthFull': 'June, 2017',
    'FormattedDate': '06/01/2017 09:12 AM'
  }, {
    'UniqueId': 'T100024',
    'Category': 'Food',
    'PaymentMode': 'Cash',
    'TransactionType': 'Expense',
    'Description': 'Peanuts in Coke',
    'Amount': '8',
    'MonthShort': 'Jun',
    'MonthFull': 'June, 2017',
    'FormattedDate': '06/04/2017 02:43 PM'
  }, {
    'UniqueId': 'T100025',
    'Category': 'Food',
    'PaymentMode': 'Cash',
    'TransactionType': 'Expense',
    'Description': 'Palmetto Cheese, Mint julep',
    'Amount': '11',
    'MonthShort': 'Jun',
    'MonthFull': 'June, 2017',
    'FormattedDate': '06/04/2017 08:35 PM'
  }, {
    'UniqueId': 'T100026',
    'Category': 'Transportation',
    'PaymentMode': 'Debit Card',
    'TransactionType': 'Expense',
    'Description': 'Cars and trucks, used',
    'Amount': '9',
    'MonthShort': 'Jun',
    'MonthFull': 'June, 2017',
    'FormattedDate': '06/04/2017 10:25 AM'
  }, {
    'UniqueId': 'T100027',
    'Category': 'Transportation',
    'PaymentMode': 'Debit Card',
    'TransactionType': 'Expense',
    'Description': 'Public and other transportation',
    'Amount': '8',
    'MonthShort': 'Jun',
    'MonthFull': 'June, 2017',
    'FormattedDate': '06/04/2017 03:55 PM'
  }, {
    'UniqueId': 'T100028',
    'Category': 'Shopping',
    'PaymentMode': 'Cash',
    'TransactionType': 'Expense',
    'Description': 'Household things \u0026 Utilities',
    'Amount': '160',
    'MonthShort': 'Jun',
    'MonthFull': 'June, 2017',
    'FormattedDate': '06/04/2017 10:22 AM'
  },
{
    'UniqueId': 'T101284',
    'Category': 'Extra income',
    'PaymentMode': 'Cash',
    'TransactionType': 'Income',
    'Description': 'Income from Sale',
    'Amount': '110',
    'MonthShort': 'Nov',
    'MonthFull': 'November, 2017',
    'FormattedDate': '11/30/2017 02:42 PM'
  }];
  export let hardwareData: Object[]  = [
    {
        'TaskID': 1,
        'Name': 'Lenovo Yoga',
        'Category': 'Laptop',
        'SerialNo': 'CB27932009',
        'InvoiceNo': 'INV-2878',
        'DOP': '04/10/2018',
        'WEO': '05/01/2021',
        'Status': 'Assigned',
        'AssignedTo': 'John Doe',
        'Note': 'Remarks are noted'
    },
    {
        'TaskID': 2,
        'Name': 'Acer Aspire',
        'Category': 'Others',
        'SerialNo': 'CB35728290',
        'InvoiceNo': 'INV-3456',
        'DOP': '02/12/2018',
        'WEO': '03/01/2023',
        'Status': 'In-repair',
        'AssignedTo': '',
        'Note': 'Remarks are noted'
    },
    {
        'TaskID': 3,
        'Name': 'Apple MacBook',
        'Category': 'Laptop',
        'SerialNo': 'CB35628728',
        'InvoiceNo': 'INV-2763',
        'DOP': '04/10/2018',
        'WEO': '04/03/2021',
        'Status': 'In-repair',
        'AssignedTo': '',
        'Note': 'Remarks are noted'
    },
    {
        'TaskID': 4,
        'Name': 'Lenovo ThinkPad',
        'Category': 'Laptop',
        'SerialNo': 'CB56209872',
        'InvoiceNo': 'INV-2980',
        'DOP': '03/09/2018',
        'WEO': '05/12/2021',
        'Status': 'Pending',
        'AssignedTo': '',
        'Note': 'Remarks are noted'
    },
    {
        'TaskID': 5,
        'Name': 'Dell Inspiron',
        'Category': 'Laptop',
        'SerialNo': 'CB56289036',
        'InvoiceNo': 'INV-3782',
        'DOP': '01/10/2018',
        'WEO': '04/01/2021',
        'Status': 'Assigned',
        'AssignedTo': 'David Anto',
        'Note': 'Remarks are noted'
    },
    {
        'TaskID': 6,
        'Name': 'HP Pavilion',
        'Category': 'Laptop',
        'SerialNo': 'CB56289305',
        'InvoiceNo': 'INV-2712',
        'DOP': '04/10/2018',
        'WEO': '05/01/2021',
        'Status': 'Assigned',
        'AssignedTo': 'Mary Saveley',
        'Note': 'Remarks are noted'
    },
    {
        'TaskID': 7,
        'Name': 'Asus ZenBook',
        'Category': 'Laptop',
        'SerialNo': 'CB25637891',
        'InvoiceNo': 'INV-0984',
        'DOP': '06/16/2018',
        'WEO': '09/01/2021',
        'Status': 'Pending',
        'AssignedTo': '',
        'Note': 'Remarks are noted'
    },
    {
        'TaskID': 8,
        'Name': 'HP EliteBook',
        'Category': 'Laptop',
        'SerialNo': 'CB27819726',
        'InvoiceNo': 'INV-2561',
        'DOP': '02/19/2018',
        'WEO': '05/21/2021',
        'Status': 'Ordered',
        'AssignedTo': '',
        'Note': 'Remarks are noted'
    },
    {
        'TaskID': 9,
        'Name': 'Apple MacBook Air',
        'Category': 'Laptop',
        'SerialNo': 'CB05262880',
        'InvoiceNo': 'INV-8970',
        'DOP': '02/12/2018',
        'WEO': '03/01/2023',
        'Status': 'Pending',
        'AssignedTo': '',
        'Note': 'Remarks are noted'
    },
    {
        'TaskID': 10,
        'Name': 'Apple iPad Air',
        'Category': 'Tablet',
        'SerialNo': 'CB45262777',
        'InvoiceNo': 'INV-4555',
        'DOP': '04/10/2018',
        'WEO': '05/01/2021',
        'Status': 'Pending',
        'AssignedTo': '',
        'Note': 'Remarks are noted'
    }
];
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { enableProdMode } from '@angular/core';
import { AppModule } from './app.module';

enableProdMode();
platformBrowserDynamic().bootstrapModule(AppModule);