Localization in ASP.NET Core Gantt

7 Jul 20227 minutes to read

Localization is the process of customizing the User Interface (UI) based on a culture, specific to a particular country or region, in order to display 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	JAVASCRIPT columnHeaderTexts: { taskId: "ID", taskName: "Task Name", startDate: "Start Date", endDate: "End Date", resourceInfo: "Resources", duration: "Duration", status: "Progress", predecessor: "Predecessors", baselineStartDate: "Baseline Start Date", baselineEndDate: "Baseline End Date", WBS: "WBS", WBSPredecessor: "WBS Predecessor" },
Edit Dialog Texts: addFormTitle editFormTitle saveButton deleteButton cancelButton addPredecessor removePredecessor	JAVASCRIPT editDialogTexts: { addFormTitle: "New Task", editFormTitle: "Edit Task", saveButton: "Save", deleteButton: "Delete", cancelButton: "Cancel", addPredecessor: "Add New", removePredecessor: "Remove" },
alertTexts: indentAlert outdentAlert predecessorEditingValidationAlert predecessorAddingValidationAlert idValidationAlert dateValidationAlert	JAVASCRIPT alertTexts: { indentAlert: "There is no gantt record is selected to perform the Indent", outdentAlert: "There is no gantt record is selected to perform the Outdent", predecessorEditingValidationAlert: "Cyclic Dependency Occured, Please Check The Predecessor", predecessorAddingValidationAlert: "Fill all the columns in predecessor table", idValidationAlert: "Duplicate ID", dateValidationAlert: "Invalid End date" },
columnDialogTexts: field editType filterEditType allowFiltering allowFilteringBlankContent allowSorting visible width textAlign headerTextAlign isFrozen allowFreezing columnsDropdownData dropdownTableText dropdownTableValue addData deleteData allowCellSelection	JAVASCRIPT columnDialogTexts: { field: "Field", headerText: "Header Text", editType: "Edit Type", filterEditType: "Filter Edit Type", allowFiltering: "Allow Filtering", allowFilteringBlankContent: "Allow Filtering Blank Content", allowSorting: "Allow Sorting", visible: "Visible", width: "Width", textAlign: "Text Alignment", headerTextAlign: "Header Text Alignment", isFrozen: "Is Frozen", allowFreezing: "Allow Freezing", columnsDropdownData: "Column Dropdown Data", dropdownTableText: "Text", dropdownTableValue: "Value", addData: "Add", deleteData: "Remove", allowCellSelection: "Allow Cell Selection" },
toolboxTooltipTexts: addTool editTool saveTool deleteTool cancelTool searchTool indentTool outdentTool expandAllTool collapseAllTool nextTimeSpanTool prevTimeSpanTool	JAVASCRIPT toolboxTooltipTexts: { addTool: "Add", editTool: "Edit", saveTool: "Update", deleteTool: "Delete", cancelTool: "Cancel", searchTool: "Search", indentTool: "Indent", outdentTool: "Outdent", expandAllTool: "ExpandAll", collapseAllTool: "CollapseAll", nextTimeSpanTool: "Next Timespan", prevTimeSpanTool: "Previous Timespan" },
contextMenuTexts: taskDetailsText addNewTaskText indentText outdentText deleteText aboveText belowText	JAVASCRIPT contextMenuTexts: { taskDetailsText: "Task Details...", addNewTaskText: "Add New Task", indentText: "Indent", outdentText: "Outdent", deleteText: "Delete", aboveText: "Above", belowText: "Below" },
newTaskTexts: newTaskName	JAVASCRIPT newTaskTexts: { newTaskName: "New Task" },
columnMenuTexts: sortAscendingText sortDescendingText columnsText insertColumnLeft insertColumnRight deleteColumn renameColumn	JAVASCRIPT columnMenuTexts: { sortAscendingText: "Sort Ascending", sortDescendingText: "Sort Descending", columnsText: "Columns", insertColumnLeft: "Insert Column Left", insertColumnRight: "Insert Column Right", deleteColumn: "Delete Column", renameColumn: "Rename Column" },
columnDialogTitle: insertColumn deleteColumn renameColumn	JAVASCRIPT columnDialogTitle: { insertColumn: "Insert Column", deleteColumn: "Delete Column", renameColumn: "Rename Column" },
deleteColumnText	"Are you sure you want to delete this column?"
okButtonText	"OK"
cancelButtonText	"Cancel"
confirmDeleteText	"Confirm Delete"
predecessorEditingTexts: fromText toText	JAVASCRIPT predecessorEditingTexts: { fromText: "From", toText: "To" }

To localize the Column Header Texts based on French culture, refer to the following code example.

Refer the external dependency to support localization

HTML

<!--Need to add for localize the date Time object based on the culture settings-->

<script src="Scripts/ej.culture.fr.min.js"></script>

JAVASCRIPT

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"

    },

}

CSHTML

<ej-gantt id="ganttSample" datasource="ViewBag.datasource"
    //...
    locale="fr-FR">
</ejGantt>

The following screenshot shows Gantt with French culture.