Global local in Vue Query builder component
11 Jun 202419 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 |
| 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 |
<template>
<div class="control-section">
<div class="col-lg-12 querybuilder-control">
<ejs-querybuilder width="70%" :dataSource="dataSource" :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>
</div>
</div>
</template>
<script setup>
import { QueryBuilderComponent as EjsQuerybuilder, ColumnDirective as EColumn, ColumnsDirective as EColumns } from "@syncfusion/ej2-vue-querybuilder";
import { L10n, setCulture } from '@syncfusion/ej2-base';
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',
'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',
'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',
}
}
});
const dataSource = hardwareData;
const importRules = {
'condition': 'or',
'rules': [{
'label': 'Category',
'field': 'Category',
'type': 'string',
'operator': 'equal',
'value': 'Laptop'
}]
};
var hardwareData = [{
'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'
}];
</script>
<style>
@import "../node_modules/@syncfusion/ej2-base/styles/material.css";
@import "../node_modules/@syncfusion/ej2-buttons/styles/material.css";
@import "../node_modules/@syncfusion/ej2-splitbuttons/styles/material.css";
@import "../node_modules/@syncfusion/ej2-dropdowns/styles/material.css";
@import "../node_modules/@syncfusion/ej2-inputs/styles/material.css";
@import "../node_modules/@syncfusion/ej2-lists/styles/material.css";
@import "../node_modules/@syncfusion/ej2-popups/styles/material.css";
@import "../node_modules/@syncfusion/ej2-calendars/styles/material.css";
@import "../node_modules/@syncfusion/ej2-vue-querybuilder/styles/material.css";
.e-query-builder {
margin: 0 auto;
}
</style><template>
<div class="control-section">
<div class="col-lg-12 querybuilder-control">
<ejs-querybuilder width="70%" :dataSource="dataSource" :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>
</div>
</div>
</template>
<script>
import { QueryBuilderComponent, ColumnDirective, ColumnsDirective } from "@syncfusion/ej2-vue-querybuilder";
import { L10n, setCulture } from '@syncfusion/ej2-base';
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',
'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',
'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',
}
}
});
export default {
name: "App",
components: {
"ejs-querybuilder":QueryBuilderComponent,
"e-columns":ColumnsDirective,
"e-column":ColumnDirective,
},
data: function() {
return {
dataSource: hardwareData,
importRules: {
'condition': 'or',
'rules': [{
'label': 'Category',
'field': 'Category',
'type': 'string',
'operator': 'equal',
'value': 'Laptop'
}]
}
};
}
}
var hardwareData = [{
'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'
}];
</script>
<style>
@import "../node_modules/@syncfusion/ej2-base/styles/material.css";
@import "../node_modules/@syncfusion/ej2-buttons/styles/material.css";
@import "../node_modules/@syncfusion/ej2-splitbuttons/styles/material.css";
@import "../node_modules/@syncfusion/ej2-dropdowns/styles/material.css";
@import "../node_modules/@syncfusion/ej2-inputs/styles/material.css";
@import "../node_modules/@syncfusion/ej2-lists/styles/material.css";
@import "../node_modules/@syncfusion/ej2-popups/styles/material.css";
@import "../node_modules/@syncfusion/ej2-calendars/styles/material.css";
@import "../node_modules/@syncfusion/ej2-vue-querybuilder/styles/material.css";
.e-query-builder {
margin: 0 auto;
}
</style>