Global local in EJ2 TypeScript Query builder control
10 Oct 202413 minutes to read
The Localization
library allows you to localize default text content of the Query Builder. The Query Builder 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 |
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 |
import { L10n } from '@syncfusion/ej2-base';
import { QueryBuilder, ColumnsModel, RuleModel } from '@syncfusion/ej2-querybuilder';
let hardwareData: Object[] = [
'TaskID': 1,
'Name': 'Lenovo Yoga',
'Category': 'Laptop',
'SerialNo': 'CB27932009',
'InvoiceNo': 'INV-2878',
'Status': 'Assigned'
},
{
'TaskID': 2,
'Name': 'Acer Aspire',
'Category': 'Others',
'SerialNo': 'CB35728290',
'InvoiceNo': 'INV-3456',
'Status': 'In-repair'
},
{
'TaskID': 3,
'Name': 'Apple MacBook',
'Category': 'Laptop',
'SerialNo': 'CB35628728',
'InvoiceNo': 'INV-2763',
'Status': 'In-repair'
}];
L10n.load({
'de-DE': {
'querybuilder': {
'AddGroup': 'Gruppe hinzufügen',
'AddCondition': 'Bedingung hinzufügen',
'AddButton': 'Gruppe/Bedingung hinzufügen',
'DeleteRule': 'Entfernen Sie diesen Zustand',
'DeleteGroup': 'Gruppe löschen',
'Edit': 'BEARBEITEN',
'SelectField': 'Wählen Sie ein Feld aus',
'DeleteRule': 'Entfernen Sie diesen Zustand',
'DeleteGroup': 'Gruppe löschen',
'SelectOperator': 'Operator auswählen',
'StartsWith': 'Beginnt mit',
'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',
'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',
'True': 'Wahr',
'False': 'Falsch',
}
}
});
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': [{
'label': 'Category',
'field': 'Category',
'type': 'string',
'operator': 'equal',
'value': 'Laptop'
}]
};
let queryBuilder: QueryBuilder = new QueryBuilder({
width: '70%',
dataSource: hardwareData,
locale: 'de-DE',
columns: columnData,
rule: importRules,
});
queryBuilder.appendTo('#querybuilder');
<!DOCTYPE html>
<html lang="en">
<head>
<title>EJ2 Query Builder</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="Typescript UI Controls" />
<meta name="author" content="Syncfusion" />
<link href="https://cdn.syncfusion.com/ej2/27.1.48/ej2-base/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/27.1.48/ej2-buttons/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/27.1.48/ej2-splitbuttons/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/27.1.48/ej2-dropdowns/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/27.1.48/ej2-inputs/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/27.1.48/ej2-calendars/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/27.1.48/ej2-popups/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/27.1.48/ej2-querybuilder/styles/material.css" rel="stylesheet" />
<link href="styles.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
<script src="systemjs.config.js"></script>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>
<body>
<div id='loader'>LOADING....</div>
<div id='container'>
<div id='querybuilder'></div>
<div id='property'> </div>
</div>
</body>
</html>