Globalization and localization in React Query Builder component

2 Mar 202615 minutes to read

The localization library enables you to translate the Query Builder’s default text content into other languages and cultures (Arabic, German, French, etc.). Define the locale value and provide a translation object to customize component labels and messages across different regions.

The following table lists the localizable properties and their default English values:

Locale key words	Text
AddGroup	Add Group
AddCondition	Add Condition
AddButton	Add Group/Condition
DeleteRule	Remove this condition
DeleteGroup	Delete group
Edit	EDIT
SelectField	Select a field
SelectOperator	Select operator
StartsWith	Starts With
EndsWith	Ends With
DoesNotStartWith	Does Not Start With
DoesNotEndWith	Does Not End With
Contains	Contains
DoesNotContain	Does Not Contain
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
True	True
False	False

app.jsx

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';
L10n.load({
    'de-DE': {
        'querybuilder': {
            "AddCondition": "Bedingung hinzufügen",
            "AddGroup": "Gruppe hinzufügen",
            "AddButton": "Gruppe/Bedingung hinzufügen",
            "Between": "Zwischen",
            "Contains": "Enthält",
            "DeleteGroup": "Gruppe löschen",
            "DeleteRule": "Entfernen Sie diesen Zustand",
            "Edit": "BEARBEITEN",
            "EndsWith": "Endet mit",
            "DoesNotStartWith": "Beginnt nicht mit",
            "DoesNotEndWith": "Endet nicht mit",
            "IsEmpty": "Ist leer",
            "IsNotEmpty": "Ist nicht leer",
            "IsNull": "Ist Null",
            "IsNotNull": "Ist nicht Null",
            "DoesNotContain": "Beinhaltet nicht",
            "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",
            "True": "Wahr",
            "False": "Falsch",
        }
    }
});
function App() {
    let 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' }
    ];
    let importRules = {
        'condition': 'or',
        'rules': [{
                'field': 'Category',
                'label': 'Category',
                'operator': 'equal',
                'type': 'string',
                'value': 'Laptop'
            }]
    };
    return (<QueryBuilderComponent width='100%' locale='de-DE' dataSource={hardwareData} columns={columnData} rule={importRules}/>);
}
export default App;
ReactDom.render(<App />, document.getElementById('querybuilder'));

app.tsx

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';

L10n.load({
    'de-DE': {
        'querybuilder': {
            "AddCondition": "Bedingung hinzufügen",
            "AddGroup": "Gruppe hinzufügen",
            "AddButton": "Gruppe/Bedingung hinzufügen",
            "Between": "Zwischen",
            "Contains": "Enthält",
            "DeleteGroup": "Gruppe löschen",
            "DeleteRule": "Entfernen Sie diesen Zustand",
            "Edit": "BEARBEITEN",
            "EndsWith": "Endet mit",
            "DoesNotStartWith": "Beginnt nicht mit",
            "DoesNotEndWith": "Endet nicht mit",
            "IsEmpty": "Ist leer",
            "IsNotEmpty": "Ist nicht leer",
            "IsNull": "Ist Null",
            "IsNotNull": "Ist nicht Null",
            "DoesNotContain": "Beinhaltet nicht",
            "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",
            "True": "Wahr",
            "False": "Falsch",
        }
    }
});

function App() {
    let 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' }
    ];
    let importRules: RuleModel = {
        'condition': 'or',
        'rules': [{
            'field': 'Category',
            'label': 'Category',
            'operator': 'equal',
            'type': 'string',
            'value': 'Laptop'
        }]
    };

    return (
        <QueryBuilderComponent width='100%' locale='de-DE' dataSource={hardwareData} columns={columnData} rule={importRules} />
    );
}
export default App;
ReactDom.render(<App />,document.getElementById('querybuilder'));