Localization in React Kanban component
27 Jan 202324 minutes to read
The localization library allows you to localize the default text content of the Kanban to different cultures using the locale property.
In Kanban, total count and min or max count text alone will be localized based on culture.
| Locale key | en-US (default) |
|---|---|
| items | items |
| min | Min |
| max | Max |
| cardsSelected | Cards Selected |
| addTitle | Add New Card |
| editTitle | Edit Card Details |
| deleteTitle | Delete Card |
| deleteContent | Are you sure you want to delete this card? |
| save | Save |
| delete | Delete |
| cancel | Cancel |
| yes | Yes |
| no | No |
| close | Close |
| noCard | No cards to display |
| unassigned | Unassigned |
Loading translations
To load translation object in an application, use load function of L10n class.
The following example demonstrates the Kanban in Deutsch culture.
[Class-component]
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { extend, L10n } from '@syncfusion/ej2-base';
import { KanbanComponent, ColumnsDirective, ColumnDirective } from "@syncfusion/ej2-react-kanban";
import { kanbanData } from './datasource';
L10n.load({
'de': {
'kanban': {
'items': 'Artikel',
'min': 'Min',
'max': 'Max',
'cardsSelected': 'Karten ausgewählt',
'addTitle': 'Neue Karte hinzufügen',
'editTitle': 'Kartendetails bearbeiten',
'deleteTitle': 'Karte löschen',
'deleteContent': 'Möchten Sie diese Karte wirklich löschen?',
'save': 'speichern',
'delete': 'Löschen',
'cancel': 'Stornieren',
'yes': 'Ja',
'no': 'Nein',
'close': 'Schließen',
'noCard': 'Keine Karten zum Anzeigen',
'unassigned': 'nicht zugewiesen'
}
}
});
class App extends React.Component {
constructor() {
super(...arguments);
this.data = extend([], kanbanData, null, true);
}
render() {
return <KanbanComponent id="kanban" keyField="Status" dataSource={this.data} locale='de' cardSettings={{ contentField: "Summary", headerField: "Id" }} swimlaneSettings={{ keyField: "Assignee" }}>
<ColumnsDirective>
<ColumnDirective headerText="To Do" keyField="Open" minCount={6}/>
<ColumnDirective headerText="In Progress" keyField="InProgress" maxCount={3}/>
<ColumnDirective headerText="Done" keyField="Close"/>
</ColumnsDirective>
</KanbanComponent>;
}
}
;
ReactDOM.render(<App />, document.getElementById('kanban'));import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { extend, L10n } from '@syncfusion/ej2-base';
import { KanbanComponent, ColumnsDirective, ColumnDirective } from "@syncfusion/ej2-react-kanban";
import { kanbanData } from './datasource';
L10n.load({
'de': {
'kanban': {
'items': 'Artikel',
'min': 'Min',
'max': 'Max',
'cardsSelected': 'Karten ausgewählt',
'addTitle': 'Neue Karte hinzufügen',
'editTitle': 'Kartendetails bearbeiten',
'deleteTitle': 'Karte löschen',
'deleteContent': 'Möchten Sie diese Karte wirklich löschen?',
'save': 'speichern',
'delete': 'Löschen',
'cancel': 'Stornieren',
'yes': 'Ja',
'no': 'Nein',
'close': 'Schließen',
'noCard': 'Keine Karten zum Anzeigen',
'unassigned': 'nicht zugewiesen'
}
}
});
class App extends React.Component<{}, {}>{
constructor() {
super(...arguments);
this.data = extend([], kanbanData, null, true);
}
render() {
return <KanbanComponent id="kanban" keyField="Status" dataSource={this.data} locale='de' cardSettings={{ contentField: "Summary", headerField: "Id" }} swimlaneSettings={{ keyField: "Assignee" }}>
<ColumnsDirective>
<ColumnDirective headerText="To Do" keyField="Open" minCount={6} />
<ColumnDirective headerText="In Progress" keyField="InProgress" maxCount={3} />
<ColumnDirective headerText="Done" keyField="Close" />
</ColumnsDirective>
</KanbanComponent>
}
};
ReactDOM.render(<App />, document.getElementById('kanban'));<!DOCTYPE html>
<html lang="en">
<head>
<title>Kanban Localization</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="Kanban localization" />
<meta name="author" content="Syncfusion" />
<link href="https://cdn.syncfusion.com/ej2/27.2.2/ej2-base/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/27.2.2/ej2-react-layouts/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/27.2.2/ej2-react-navigations/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/27.2.2/ej2-react-buttons/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/27.2.2/ej2-react-dropdowns/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/27.2.2/ej2-react-inputs/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/27.2.2/ej2-react-popups/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/27.2.2/ej2-react-kanban/styles/material.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
<script src="systemjs.config.js"></script>
<style>
#loader {
color: #008cff;
height: 40px;
left: 45%;
position: absolute;
top: 45%;
width: 30%;
}
</style>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>
<body>
<div id='kanban'>
<div id='loader'>Loading....</div>
</div>
</body>
</html>[Functional-component]
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { extend, L10n } from '@syncfusion/ej2-base';
import { KanbanComponent, ColumnsDirective, ColumnDirective } from "@syncfusion/ej2-react-kanban";
import { kanbanData } from './datasource';
L10n.load({
'de': {
'kanban': {
'items': 'Artikel',
'min': 'Min',
'max': 'Max',
'cardsSelected': 'Karten ausgewählt',
'addTitle': 'Neue Karte hinzufügen',
'editTitle': 'Kartendetails bearbeiten',
'deleteTitle': 'Karte löschen',
'deleteContent': 'Möchten Sie diese Karte wirklich löschen?',
'save': 'speichern',
'delete': 'Löschen',
'cancel': 'Stornieren',
'yes': 'Ja',
'no': 'Nein',
'close': 'Schließen',
'noCard': 'Keine Karten zum Anzeigen',
'unassigned': 'nicht zugewiesen'
}
}
});
function App() {
let data = extend([], kanbanData, null, true);
return (<KanbanComponent id="kanban" keyField="Status" dataSource={data} locale='de' cardSettings={{ contentField: "Summary", headerField: "Id" }} swimlaneSettings={{ keyField: "Assignee" }}>
<ColumnsDirective>
<ColumnDirective headerText="To Do" keyField="Open" minCount={6}/>
<ColumnDirective headerText="In Progress" keyField="InProgress" maxCount={3}/>
<ColumnDirective headerText="Done" keyField="Close"/>
</ColumnsDirective>
</KanbanComponent>);
}
ReactDOM.render(<App />, document.getElementById('kanban'));import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { extend, L10n } from '@syncfusion/ej2-base';
import { KanbanComponent, ColumnsDirective, ColumnDirective } from "@syncfusion/ej2-react-kanban";
import { kanbanData } from './datasource';
L10n.load({
'de': {
'kanban': {
'items': 'Artikel',
'min': 'Min',
'max': 'Max',
'cardsSelected': 'Karten ausgewählt',
'addTitle': 'Neue Karte hinzufügen',
'editTitle': 'Kartendetails bearbeiten',
'deleteTitle': 'Karte löschen',
'deleteContent': 'Möchten Sie diese Karte wirklich löschen?',
'save': 'speichern',
'delete': 'Löschen',
'cancel': 'Stornieren',
'yes': 'Ja',
'no': 'Nein',
'close': 'Schließen',
'noCard': 'Keine Karten zum Anzeigen',
'unassigned': 'nicht zugewiesen'
}
}
});
function App(){
let data = extend([], kanbanData, null, true);
return(
<KanbanComponent id="kanban" keyField="Status" dataSource={data} locale='de' cardSettings={{ contentField: "Summary", headerField: "Id" }} swimlaneSettings={{ keyField: "Assignee" }}>
<ColumnsDirective>
<ColumnDirective headerText="To Do" keyField="Open" minCount={6} />
<ColumnDirective headerText="In Progress" keyField="InProgress" maxCount={3} />
<ColumnDirective headerText="Done" keyField="Close" />
</ColumnsDirective>
</KanbanComponent>
);
}
ReactDOM.render(<App />, document.getElementById('kanban'));<!DOCTYPE html>
<html lang="en">
<head>
<title>Kanban Localization</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="Kanban localization" />
<meta name="author" content="Syncfusion" />
<link href="https://cdn.syncfusion.com/ej2/27.2.2/ej2-base/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/27.2.2/ej2-react-layouts/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/27.2.2/ej2-react-navigations/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/27.2.2/ej2-react-buttons/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/27.2.2/ej2-react-dropdowns/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/27.2.2/ej2-react-inputs/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/27.2.2/ej2-react-popups/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/27.2.2/ej2-react-kanban/styles/material.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
<script src="systemjs.config.js"></script>
<style>
#loader {
color: #008cff;
height: 40px;
left: 45%;
position: absolute;
top: 45%;
width: 30%;
}
</style>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>
<body>
<div id='kanban'>
<div id='loader'>Loading....</div>
</div>
</body>
</html>Right to left (RTL)
The Kanban provides an option to switch its text direction and layout from right to left. It improves the user experiences and accessibility for users who use right-to-left languages (Arabic, Farsi, Urdu, etc.). To enable right-to-left mode in Kanban, set the enableRtl to true.
[Class-component]
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { extend, L10n } from '@syncfusion/ej2-base';
import { KanbanComponent, ColumnsDirective, ColumnDirective } from "@syncfusion/ej2-react-kanban";
import { kanbanData } from './datasource';
L10n.load({
'ar': {
'kanban': {
'items': 'العناصر',
'min': 'أنا',
'max': 'ماكس',
'cardsSelected': 'تم تحديد البطاقات',
'addTitle': 'إضافة بطاقة جديدة',
'editTitle': 'تحرير تفاصيل البطاقة',
'deleteTitle': 'حذف البطاقة',
'deleteContent': 'هل أنت متأكد أنك تريد حذف هذه البطاقة؟',
'save': 'حفظ',
'delete': 'حذف',
'cancel': 'إلغاء',
'yes': 'نعم',
'no': 'لا',
'close': 'قريب',
'noCard': 'لا توجد بطاقات لعرضها',
'unassigned': 'غير معين'
}
}
});
class App extends React.Component {
constructor() {
super(...arguments);
this.data = extend([], kanbanData, null, true);
}
render() {
return <KanbanComponent id="kanban" keyField="Status" dataSource={this.data} locale='ar' enableRtl={true} cardSettings={{ contentField: "Summary", headerField: "Id" }} swimlaneSettings={{ keyField: "Assignee" }}>
<ColumnsDirective>
<ColumnDirective headerText="To Do" keyField="Open" minCount={2}/>
<ColumnDirective headerText="In Progress" keyField="InProgress" maxCount={3}/>
<ColumnDirective headerText="Done" keyField="Close"/>
</ColumnsDirective>
</KanbanComponent>;
}
}
;
ReactDOM.render(<App />, document.getElementById('kanban'));import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { extend, L10n } from '@syncfusion/ej2-base';
import { KanbanComponent, ColumnsDirective, ColumnDirective } from "@syncfusion/ej2-react-kanban";
import { kanbanData } from './datasource';
L10n.load({
'ar': {
'kanban': {
'items': 'العناصر',
'min': 'أنا',
'max': 'ماكس',
'cardsSelected': 'تم تحديد البطاقات',
'addTitle': 'إضافة بطاقة جديدة',
'editTitle': 'تحرير تفاصيل البطاقة',
'deleteTitle': 'حذف البطاقة',
'deleteContent': 'هل أنت متأكد أنك تريد حذف هذه البطاقة؟',
'save': 'حفظ',
'delete': 'حذف',
'cancel': 'إلغاء',
'yes': 'نعم',
'no': 'لا',
'close': 'قريب',
'noCard': 'لا توجد بطاقات لعرضها',
'unassigned': 'غير معين'
}
}
});
class App extends React.Component<{}, {}>{
constructor() {
super(...arguments);
this.data = extend([], kanbanData, null, true);
}
render() {
return <KanbanComponent id="kanban" keyField="Status" dataSource={this.data} locale='ar' enableRtl={true} cardSettings={{ contentField: "Summary", headerField: "Id" }} swimlaneSettings={{ keyField: "Assignee" }}>
<ColumnsDirective>
<ColumnDirective headerText="To Do" keyField="Open" minCount={2} />
<ColumnDirective headerText="In Progress" keyField="InProgress" maxCount={3} />
<ColumnDirective headerText="Done" keyField="Close" />
</ColumnsDirective>
</KanbanComponent>
}
};
ReactDOM.render(<App />, document.getElementById('kanban'));<!DOCTYPE html>
<html lang="en">
<head>
<title>Kanban RTL</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="Kanban RTL mode" />
<meta name="author" content="Syncfusion" />
<link href="https://cdn.syncfusion.com/ej2/27.2.2/ej2-base/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/27.2.2/ej2-react-layouts/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/27.2.2/ej2-react-navigations/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/27.2.2/ej2-react-buttons/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/27.2.2/ej2-react-dropdowns/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/27.2.2/ej2-react-inputs/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/27.2.2/ej2-react-popups/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/27.2.2/ej2-react-kanban/styles/material.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
<script src="systemjs.config.js"></script>
<style>
#loader {
color: #008cff;
height: 40px;
left: 45%;
position: absolute;
top: 45%;
width: 30%;
}
</style>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>
<body>
<div id='kanban'>
<div id='loader'>Loading....</div>
</div>
</body>
</html>[Functional-component]
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { extend, L10n } from '@syncfusion/ej2-base';
import { KanbanComponent, ColumnsDirective, ColumnDirective } from "@syncfusion/ej2-react-kanban";
import { kanbanData } from './datasource';
L10n.load({
'ar': {
'kanban': {
'items': 'العناصر',
'min': 'أنا',
'max': 'ماكس',
'cardsSelected': 'تم تحديد البطاقات',
'addTitle': 'إضافة بطاقة جديدة',
'editTitle': 'تحرير تفاصيل البطاقة',
'deleteTitle': 'حذف البطاقة',
'deleteContent': 'هل أنت متأكد أنك تريد حذف هذه البطاقة؟',
'save': 'حفظ',
'delete': 'حذف',
'cancel': 'إلغاء',
'yes': 'نعم',
'no': 'لا',
'close': 'قريب',
'noCard': 'لا توجد بطاقات لعرضها',
'unassigned': 'غير معين'
}
}
});
function App() {
let data = extend([], kanbanData, null, true);
return (<KanbanComponent id="kanban" keyField="Status" dataSource={data} locale='ar' enableRtl={true} cardSettings={{ contentField: "Summary", headerField: "Id" }} swimlaneSettings={{ keyField: "Assignee" }}>
<ColumnsDirective>
<ColumnDirective headerText="To Do" keyField="Open" minCount={2}/>
<ColumnDirective headerText="In Progress" keyField="InProgress" maxCount={3}/>
<ColumnDirective headerText="Done" keyField="Close"/>
</ColumnsDirective>
</KanbanComponent>);
}
ReactDOM.render(<App />, document.getElementById('kanban'));import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { extend, L10n } from '@syncfusion/ej2-base';
import { KanbanComponent, ColumnsDirective, ColumnDirective } from "@syncfusion/ej2-react-kanban";
import { kanbanData } from './datasource';
L10n.load({
'ar': {
'kanban': {
'items': 'العناصر',
'min': 'أنا',
'max': 'ماكس',
'cardsSelected': 'تم تحديد البطاقات',
'addTitle': 'إضافة بطاقة جديدة',
'editTitle': 'تحرير تفاصيل البطاقة',
'deleteTitle': 'حذف البطاقة',
'deleteContent': 'هل أنت متأكد أنك تريد حذف هذه البطاقة؟',
'save': 'حفظ',
'delete': 'حذف',
'cancel': 'إلغاء',
'yes': 'نعم',
'no': 'لا',
'close': 'قريب',
'noCard': 'لا توجد بطاقات لعرضها',
'unassigned': 'غير معين'
}
}
});
function App(){
let data = extend([], kanbanData, null, true);
return(
<KanbanComponent id="kanban" keyField="Status" dataSource={data} locale='ar' enableRtl={true} cardSettings={{ contentField: "Summary", headerField: "Id" }} swimlaneSettings={{ keyField: "Assignee" }}>
<ColumnsDirective>
<ColumnDirective headerText="To Do" keyField="Open" minCount={2} />
<ColumnDirective headerText="In Progress" keyField="InProgress" maxCount={3} />
<ColumnDirective headerText="Done" keyField="Close" />
</ColumnsDirective>
</KanbanComponent>
);
}
ReactDOM.render(<App />, document.getElementById('kanban'));<!DOCTYPE html>
<html lang="en">
<head>
<title>Kanban RTL</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="Kanban RTL mode" />
<meta name="author" content="Syncfusion" />
<link href="https://cdn.syncfusion.com/ej2/27.2.2/ej2-base/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/27.2.2/ej2-react-layouts/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/27.2.2/ej2-react-navigations/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/27.2.2/ej2-react-buttons/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/27.2.2/ej2-react-dropdowns/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/27.2.2/ej2-react-inputs/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/27.2.2/ej2-react-popups/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/27.2.2/ej2-react-kanban/styles/material.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
<script src="systemjs.config.js"></script>
<style>
#loader {
color: #008cff;
height: 40px;
left: 45%;
position: absolute;
top: 45%;
width: 30%;
}
</style>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>
<body>
<div id='kanban'>
<div id='loader'>Loading....</div>
</div>
</body>
</html>