Category / Section
How to change the localization in ASP.NET MVC Gantt?
3 mins read
Gantt can be localized to any specific locale by setting the respective locale code like en-US, fr-FR etc., to the Locale property in Gantt. User must also need to refer the culture file specific to the defined locale from the Essential studio installed location to localize the date, time, currency and other formats. Gantt will be displayed with ‘en-US’ localization by default.
The culture file can be referred from the below installed location.
C:\{{ES installed location}}\JavaScript\assets\scripts\i18n\ej.culture.fr-FR.min
Gantt UI also contains texts in the dialog popup, toolbar and tooltips which needs to be localized. To localize these texts, you need to define the localized texts in the project or by referring the predefined locale text files from the Essential studio installed location.
The locale text file can be referred from the below installed location.
C:\{{ES installed location}}\JavaScript\assets\scripts \l10n\ej.localetexts.fr-FR.min
The localized texts can be defined in Gantt by the following ways,
To Refer the corresponding locale text file from the ES installed location. [OR]
To define the localized texts in the project.
Please refer the below code snippets for more details.
Referring predefined locale text files
<head runat="server">
<title>Gantt Sample</title>
<link href="//cdn.syncfusion.com/15.2.0.43/js/web/flat-azure/ej.web.all.min.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/15.2.0.43/js/web/responsive-css/ej.responsive.css" rel="stylesheet" />
<script src="//cdn.syncfusion.com/js/assets/external/jquery-2.1.4.min.js"></script>
<script src="//cdn.syncfusion.com/js/assets/external/jsrender.min.js"></script>
<script src="//cdn.syncfusion.com/15.2.0.43/js/web/ej.web.all.min.js"></script> <script src="Scripts/Culture/ej.culture.fr-FR.min.js"></script>
<script src="Scripts/Culture/ej.localetexts.fr-FR.min.js"></script>
</head>
<body>
@(Html.EJ().Gantt("Gantt")
.TaskIdMapping("Id")
.Locale("fr-FR")
//...
.Datasource(ViewBag.datasource)
)
@(Html.EJ().ScriptManager())
</body>
Defining the localized texts
<body>
@(Html.EJ().Gantt("Gantt")
.TaskIdMapping("Id")
.Locale("fr-FR")
//...
.Datasource(ViewBag.datasource)
)
@(Html.EJ().ScriptManager())
</body>
<script>
ej.Gantt.Locale["fr-FR"] = {
//string to display with dataSource contains 0 objects
emptyRecord: "Aucun enregistrement à afficher",
alertTexts: {
indentAlert: "Il n'y a aucune trace de Gantt est sélectionné pour effectuer le retrait",
outdentAlert: "Il n'y a aucune trace de Gantt est sélectionné pour effectuer le retrait négatif",
predecessorEditingValidationAlert: "Cyclique dépendance survenu, S'il vous plaît Consultez le prédécesseur",
predecessorAddingValidationAlert: "Remplissez toutes les colonnes dans la table prédécesseur",
idValidationAlert: "Duplicate ID",
dateValidationAlert: "Invalid Date de fin",
dialogResourceAlert: "Remplissez toutes les colonnes du tableau des ressources"
},
//headerText to be displayed in TreeGrid
columnHeaderTexts: {
taskId: "ID",
taskName: "Nom de la tâche",
startDate: "Date de début",
endDate: "Date de fin",
resourceInfo: "Ressources",
duration: "Durée",
status: "Progrès",
taskMode: "Mode tâche",
predecessor: "Prédécesseurs",
type: "Type",
offset: "Offset",
baselineStartDate: "Date de début de base",
baselineEndDate: "Baseline Date de fin",
WBS: "WBS",
WBSPredecessor: "WBS prédécesseur",
dialogCustomFieldName: "Nom de colonne",
dialogCustomFieldValue: "Valeur",
notes: "Remarques",
taskType: "type de tâche",
work: "Travail",
unit: "Unité",
effortDriven: "effort Driven"
},
//string to display in dialog box
editDialogTexts: {
addFormTitle: "Nouvelle tâche",
editFormTitle: "Modifier la tâche",
saveButton: "sauvegarder",
deleteButton: "Effacer",
cancelButton: "Annuler",
addPredecessor: "Ajouter un nouveau",
removePredecessor: "Retirer",
addButton: "Ajouter"
},
columnDialogTexts: {
field: "Champ",
headerText: "En-tête",
editType: "Modifier le type",
filterEditType: "Modifier le type de filtre",
allowFiltering: "Autoriser le filtrage",
allowFilteringBlankContent: "Autoriser le filtrage du contenu Blank",
allowSorting: "Autoriser tri",
visible: "Visible",
width: "Largeur",
textAlign: "Alignement du texte",
headerTextAlign: "Alignement du texte en-tête",
columnsDropdownData: "Colonne Chute de données vers le bas",
dropdownTableText: "Texte",
dropdownTableValue: "Valeur",
addData: "Ajouter",
deleteData: "Retirer",
allowCellSelection: "Autoriser la sélection de cellules",
clipMode: "Mode Clip",
tooltip: "Info-bulle",
showInColumnChooser: "Afficher dans le sélecteur de colonne",
headerTooltip: "Header Tooltip"
},
editTypeTexts: {
string: "Chaîne",
numeric: "Numérique",
datePicker: "Sélecteur de date",
dateTimePicker: "Date Time Picker",
dropdown: "Menu déroulant",
boolean: "Boolean"
},
textAlignTypes: {
right: "Droite",
left: "La gauche",
center: "centre"
},
clipModeTexts: {
clip: "Agrafe",
ellipsis: "Ellipse"
},
//string to be displayed in Toolbox's tooltip
toolboxTooltipTexts: {
addTool: "Ajouter",
editTool: "modifier",
saveTool: "Mettre à jour",
deleteTool: "Effacer",
cancelTool: "Annuler",
searchTool: "Chercher",
indentTool: "tiret",
outdentTool: "Retrait négatif",
expandAllTool: "Développer tout",
collapseAllTool: "Réduire tout",
nextTimeSpanTool: "Suivant Timespan",
prevTimeSpanTool: "Précédent Timespan",
criticalPathTool: "Chemin critique",
excelExportTool: "Exportation Excel",
pdfExportTool: "Exportation PDF"
},
//string to be displayed in taskbar tooltip for duration unit
durationUnitTexts: {
days: "journées",
hours: "heures",
minutes: "minutes",
day: "journée",
hour: "heure",
minute: "minute"
},
durationUnitEditText: {
minute: ["m", "min", "minute", "minutes"],
hour: ["h", "heure", "heure", "heures"],
day: ["ré", "dy", "journée", "journées"]
},
workUnitTexts: {
days: "journées",
hours: "heures",
minutes: "minutes"
},
taskTypeTexts: {
fixedWork: "travail fixe",
fixedUnit: "Unités fixes",
fixedDuration: "Durée fixe"
},
effortDrivenTexts: {
yes: "Oui",
no: "Non"
},
//string to be displayed in context menu
contextMenuTexts: {
taskDetailsText: "Détails de la tâche ...",
addNewTaskText: "Ajouter une nouvelle tâche",
indentText: "tiret",
outdentText: "Retrait négatif",
deleteText: "Effacer",
aboveText: "Au dessus de",
belowText: "Au dessous de"
},
//Name to be displayed for New Task while adding
newTaskTexts: {
newTaskName: "Nouvelle tâche"
},
//string to be displayed in column menu
columnMenuTexts: {
sortAscendingText: "Trier par ordre croissant",
sortDescendingText: "Trier par ordre décroissant",
columnsText: "colonnes",
insertColumnLeft: "Insérez la colonne de gauche",
insertColumnRight: "Insérez la colonne de droite",
deleteColumn: "Supprimer la colonne",
renameColumn: "Renommer la colonne"
},
taskModeTexts: {
manual: "Manuel",
auto: "Auto"
},
columnDialogTitle: {
insertColumn: "Insérer une colonne",
deleteColumn: "Supprimer la colonne",
renameColumn: "Renommer la colonne"
},
deleteColumnText: "Êtes-vous sûr de vouloir supprimer cette colonne?",
okButtonText: "D'accord",
cancelButtonText: "Annuler",
confirmDeleteText: "Confirmation de la suppression",
//string to be displayed while editing predecessor
predecessorEditingTexts: {
fromText: "De",
toText: "À"
},
dialogTabTitleTexts: {
generalTabText: "Général",
predecessorsTabText: "Prédécesseurs",
resourcesTabText: "Ressources",
customFieldsTabText: "Les champs personnalisés",
notesTabText: "Remarques"
},
predecessorCollectionText: [
{ id: "SS", text: "Démarrer-Démarrer", value: "Démarrer-Démarrer" },
{ id: "SF", text: "Démarrer-terminer", value: "Démarrer-terminer" },
{ id: "FS", text: "terminer-Démarrer", value: "terminer-Démarrer" },
{ id: "FF", text: "terminer-terminer", value: "terminer-terminer" }
]
}
</script>
The following output is displayed for the above code example.
Sample link
A sample to localize the Gantt control is available in the following link, Sample
