Localization in React QueryBuilder component

27 Oct 2021 / 3 minutes to read

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
SummaryViewTitle	Summary View
OtherFields	Other Fields
AND	AND
OR	OR
SelectValue	Enter Value
IsEmpty	Is Empty
IsNotEmpty	Is Not Empty
IsNull	Is Null
IsNotNull	Is Not Null

Source

Preview

app.tsx

index.html

datasource.ts

app.jsx

import { L10n } from '@syncfusion/ej2-base';
import { ColumnsModel, QueryBuilderComponent, RuleModel } from '@syncfusion/ej2-react-querybuilder';
import * as React from 'react';
import * as ReactDom from 'react-dom';
// @ts-ignore
import { hardwareData } from '../datasource.ts';

L10n.load({
    'de-DE': {
        'querybuilder': {
            "AddCondition": "Bedingung hinzufügen",
            "AddGroup": "Gruppe hinzufügen",
            "Between": "Zwischen",
            "Contains": "Enthält",
            "DeleteGroup": "Gruppe löschen",
            "DeleteRule": "Entfernen Sie diesen Zustand",
            "Edit": "BEARBEITEN",
            "EndsWith": "Endet mit",
            "Equal": "Gleich",
            "GreaterThan": "Größer als",
            "GreaterThanOrEqual": "Größer als oder gleich",
            "In": "Im",
            "LessThan": "Weniger als",
            "LessThanOrEqual": "Weniger als oder gleich",
            "NotBetween": "Nicht zwischen",
            "NotEqual": "Nicht gleich",
            "NotIn": "Nicht in",
            "Remove": "LÖSCHEN",
            "SelectField": "Wählen Sie ein Feld aus",
            "SelectOperator": "Operator auswählen",
            "StartsWith": "Beginnt mit",
            "ValidationMessage": "Dieses Feld wird benötigt",
        }
    }
});

class App extends React.Component<{}, {}> {
    public columnData: ColumnsModel[] = [
        { field: 'TaskID', label: 'Task ID', type: 'number' },
        { field: 'Name', label: 'Name', type: 'string' },
        { field: 'Category', label: 'Category', type: 'string' },
        { field: 'SerialNo', label: 'Serial No', type: 'string' },
        { field: 'InvoiceNo', label: 'Invoice No', type: 'string' },
        { field: 'Status', label: 'Status', type: 'string' }
    ];
    public importRules: RuleModel = {
        'condition': 'or',
        'rules': [{
            'field': 'Category',
            'label': 'Category',
            'operator': 'equal',
            'type': 'string',
            'value': 'Laptop'
        }]
    };

    public render() {
        return (
            <QueryBuilderComponent width='100%' locale='de-DE' dataSource={hardwareData} columns={this.columnData} rule={this.importRules} />
        );
    }
}

ReactDom.render(<App />,document.getElementById('querybuilder'));

<!DOCTYPE html>
<html lang="en">

<head>
    <title>Syncfusion React Query Builder</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="Essential JS 2 for React Components" />
    <meta name="author" content="Syncfusion" />
    <link href="//cdn.syncfusion.com/ej2/ej2-base/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/ej2-buttons/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/ej2-splitbuttons/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/ej2-dropdowns/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/ej2-inputs/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/ej2-calendars/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/ej2-popups/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/ej2-querybuilder/styles/material.css" rel="stylesheet" />
	<link href="index.css" rel="stylesheet" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <script src="systemjs.config.js"></script>
</head>

<body>
        <div id='querybuilder'>
            <div id='loader'>Loading....</div>
        </div>
</body>

</html>

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

import { L10n } from '@syncfusion/ej2-base';
import { QueryBuilderComponent } from '@syncfusion/ej2-react-querybuilder';
import * as React from 'react';
import * as ReactDom from 'react-dom';
// @ts-ignore
import { hardwareData } from '../datasource.ts';
L10n.load({
    'de-DE': {
        'querybuilder': {
            "AddCondition": "Bedingung hinzufügen",
            "AddGroup": "Gruppe hinzufügen",
            "Between": "Zwischen",
            "Contains": "Enthält",
            "DeleteGroup": "Gruppe löschen",
            "DeleteRule": "Entfernen Sie diesen Zustand",
            "Edit": "BEARBEITEN",
            "EndsWith": "Endet mit",
            "Equal": "Gleich",
            "GreaterThan": "Größer als",
            "GreaterThanOrEqual": "Größer als oder gleich",
            "In": "Im",
            "LessThan": "Weniger als",
            "LessThanOrEqual": "Weniger als oder gleich",
            "NotBetween": "Nicht zwischen",
            "NotEqual": "Nicht gleich",
            "NotIn": "Nicht in",
            "Remove": "LÖSCHEN",
            "SelectField": "Wählen Sie ein Feld aus",
            "SelectOperator": "Operator auswählen",
            "StartsWith": "Beginnt mit",
            "ValidationMessage": "Dieses Feld wird benötigt",
        }
    }
});
class App extends React.Component {
    constructor() {
        super(...arguments);
        this.columnData = [
            { field: 'TaskID', label: 'Task ID', type: 'number' },
            { field: 'Name', label: 'Name', type: 'string' },
            { field: 'Category', label: 'Category', type: 'string' },
            { field: 'SerialNo', label: 'Serial No', type: 'string' },
            { field: 'InvoiceNo', label: 'Invoice No', type: 'string' },
            { field: 'Status', label: 'Status', type: 'string' }
        ];
        this.importRules = {
            'condition': 'or',
            'rules': [{
                    'field': 'Category',
                    'label': 'Category',
                    'operator': 'equal',
                    'type': 'string',
                    'value': 'Laptop'
                }]
        };
    }
    render() {
        return (<QueryBuilderComponent width='100%' locale='de-DE' dataSource={hardwareData} columns={this.columnData} rule={this.importRules}/>);
    }
}
ReactDom.render(<App />, document.getElementById('querybuilder'));

Please provide additional information

Thank you for your feedback and comments.We will rectify this as soon as possible!