Localization

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.