Localization
14 Mar 20187 minutes to read
Localization is the process of customizing the User Interface (UI) based on a culture of a particular country or region to display the regional data. The culture is represented by a unique string like en
-
US
for US English and fr
-
FR
for French.
Localization is the key feature that provides solutions to global customers with the help of localized control.
The following UIs are provided to localize based on culture. The default English localization UIs are listed as follows:
Localized string value for en-US culture | |
Empty Record | emptyRecord: "No records to display" |
Column Header Texts: taskId taskName startDate endDate resourceInfo duration status predecessor baselineStartDate baselineEndDate WBS WBSPredecessor |
|
Edit Dialog Texts: addFormTitle editFormTitle saveButton deleteButton cancelButton addPredecessor removePredecessor |
|
alertTexts: indentAlert outdentAlert predecessorEditingValidationAlert predecessorAddingValidationAlert idValidationAlert dateValidationAlert |
|
columnDialogTexts: field editType filterEditType allowFiltering allowFilteringBlankContent allowSorting visible width textAlign headerTextAlign isFrozen allowFreezing columnsDropdownData dropdownTableText dropdownTableValue addData deleteData allowCellSelection |
|
toolboxTooltipTexts: addTool editTool saveTool deleteTool cancelTool searchTool indentTool outdentTool expandAllTool collapseAllTool nextTimeSpanTool prevTimeSpanTool |
|
contextMenuTexts: taskDetailsText addNewTaskText indentText outdentText deleteText aboveText belowText |
|
newTaskTexts: newTaskName |
|
columnMenuTexts: sortAscendingText sortDescendingText columnsText insertColumnLeft insertColumnRight deleteColumn renameColumn |
|
columnDialogTitle: insertColumn deleteColumn renameColumn |
|
deleteColumnText | "Are you sure you want to delete this column?" |
okButtonText | "OK" |
cancelButtonText | "Cancel" |
confirmDeleteText | "Confirm Delete" |
predecessorEditingTexts: fromText toText |
|
To localize the column header texts based on French culture, refer to the following code example:
Refer to the external dependency to support localization.
<!--Need to add for localize the date Time object based on the culture settings-->
<script src="Scripts/ej.culture.fr.min.js"></script>
<script>
ej.Gantt.Locale["fr-FR"] = {
//headerText to be displayed in TreeGrid
columnHeaderTexts: {
taskId: "Tâche Ia",
taskName: "Tâche Tâche",
startDate: "Démarrer Date",
endDate: "Fin Date",
resourceInfo: "Resources",
duration: "Durée",
status: "Progrès",
predecessor: "Prédécesseur",
baselineStartDate: "Baseline Démarrer Date",
baselineEndDate: "Baseline Fin Date"
},
//string to display in dialog
editDialogTexts: {
addFormTitle: "Nouveau Tâche",
editFormTitle: "Modifier Tâche",
saveButton: "Sauver",
cancelButton: "Annuler"
},
}
</script>
<body ng-controller="GanttCtrl">
<!--Add Gantt control here-->
<div id="GanttContainer" ej-gantt
//...
e-locale= "fr-FR"
>
</div>
The following screenshot shows the Gantt with French culture: