How can I localize the Gantt columnMenu items via localization?

1 Reply
2 Participants
Marked answer

Created by
PH PO-CHUAN HSIEH

Platform
JavaScript - EJ 2

Platform
JavaScript - EJ 2

Control
Gantt Chart

Created On
Nov 11, 2025 01:34 AM UTC

Last Activity On
Nov 11, 2025 01:41 PM UTC

Want to subscribe?
SIGN IN

I’m trying to translate the Gantt column menu to Traditional Chinese, but the column menu entries remain in English even though the rest of the component picks up my locale. The attached screenshot shows the unlocalized column menu. Image_9194_1762824047376

Sample code

index.html

<!DOCTYPE html>

<head>

<title>Gantt Chart</title>

<link

rel='nofollow' href="https://cdn.syncfusion.com/ej2/31.1.17/material.css"

rel="stylesheet"

type="text/css"

<style>

body {

margin: 0;

font-family: "Segoe UI", "Noto Sans TC", sans-serif;

background-color: #fafafa;

color: #1f2933;

}

/* Gantt 容器樣式 */

#GanttContainer {

margin: 12px 24px 32px;

}

</style>

<script

src="http://cdn.syncfusion.com/ej2/dist/ej2.min.js"

type="text/javascript"

></script>

</head>

<body>

</body>

</html>

index.js

let ganttChartInstance = null; // Gantt 圖表實例

const data = [

{

"code": "1",

"end": 1345021200000,

"id": "1",

"start": 1344470400000,

"name": "Test Project",

"progress": 0,

"subtasks": [

{

"code": "1.1",

"end": 1344589200000,

"id": "2",

"start": 1344470400000,

"name": "Subtask 1",

"progress": 0,

{

"code": "1.2",

"start": 1344816000000,

"name": "Subtask 2",

"progress": 0,

"end": 1345021200000,

"id": "3",

{

"code": "1.3",

"start": 1345021200000,

"name": "Subtask 3",

"progress": 0,

"end": 1345021200000,

"id": "4",

]

{

"code": "2",

"end": 1346144400000,

"id": "5",

"start": 1345075200000,

"name": "Another Project",

"subtasks": [

{

"code": "2.1",

"end": 1345453200000,

"id": "6",

"start": 1345075200000,

"name": "Subtask 1",

{

"code": "2.2",

"end": 1345798800000,

"start": 1345507200000,

"name": "Subtask 2",

"id": "7",

{

"code": "2.3",

"end": 1346144400000,

"start": 1346025600000,

"name": "Subtask 3",

"id": "8",

{

"code": "2.4",

"end": 1346144400000,

"start": 1346144400000,

"name": "Subtask 4",

"id": "9",

}

]

}

];

const normalize = (rawData) => {

return rawData.map(item => {

const normalizedItem = {

...item,

startDate: new Date(item.start),

endDate: new Date(item.end),

subtasks: item.subtasks ? normalize(item.subtasks) : undefined, // 遞迴處理 subtasks

};

return normalizedItem;

});

}

const zh_HantLocale = {

'zh-Hant': {

'grid': {

'startswith': '開頭是',

'endswith': '結尾是',

'contains': '包含',

'equal': '等於',

'notequal': '不等於',

'gantt': {

"emptyRecord": "沒有可顯示的記錄",

"id": "ID",

"name": "名稱",

"startDate": "開始日期",

"endDate": "結束日期",

"duration": "工期",

"progress": "進度",

"dependency": "相依關係",

"notes": "備註",

"baselineStartDate": "基準開始日期",

"baselineEndDate": "基準結束日期",

"type": "類型",

"offset": "偏移",

"resourceName": "資源",

"resourceID": "資源 ID",

"day": "天",

"hour": "小時",

"minute": "分鐘",

"days": "天",

"hours": "小時",

"minutes": "分鐘",

"generalTab": "一般",

"customTab": "自訂欄位",

"writeNotes": "撰寫備註",

"addDialogTitle": "新增任務",

"editDialogTitle": "任務資訊",

"add": "新增",

"edit": "編輯",

"update": "更新",

"delete": "刪除",

"cancel": "取消",

"search": "搜尋",

"task": "任務",

"tasks": "任務",

"zoomIn": "放大",

"zoomOut": "縮小",

"zoomToFit": "自動調整縮放",

"expandAll": "全部展開",

"collapseAll": "全部摺疊",

"nextTimeSpan": "下一個時間範圍",

"prevTimeSpan": "上一個時間範圍",

"saveButton": "儲存",

"taskBeforePredecessor_FS": "你已將「{0}」移動到在「{1}」完成前開始，且兩個任務存在連結。因此無法維持連結。請選擇以下其中一個動作。",

"taskAfterPredecessor_FS": "你已將「{0}」自「{1}」移開，且兩個任務存在連結。因此無法維持連結。請選擇以下其中一個動作。",

"taskBeforePredecessor_SS": "你已將「{0}」移動到在「{1}」開始前開始，且兩個任務存在連結。因此無法維持連結。請選擇以下其中一個動作。",

"taskAfterPredecessor_SS": "你已將「{0}」移動到在「{1}」開始之後開始，且兩個任務存在連結。因此無法維持連結。請選擇以下其中一個動作。",

"taskBeforePredecessor_FF": "你已將「{0}」移動到在「{1}」完成前完成，且兩個任務存在連結。因此無法維持連結。請選擇以下其中一個動作。",

"taskAfterPredecessor_FF": "你已將「{0}」移動到在「{1}」完成之後完成，且兩個任務存在連結。因此無法維持連結。請選擇以下其中一個動作。",

"taskBeforePredecessor_SF": "你已將「{0}」移離「{1}」的開始，且兩個任務存在連結。因此無法維持連結。請選擇以下其中一個動作。",

"taskAfterPredecessor_SF": "你已將「{0}」移動到在「{1}」開始之後完成，且兩個任務存在連結。因此無法維持連結。請選擇以下其中一個動作。",

"okText": "確定",

"confirmDelete": "確定要刪除資料嗎？",

"from": "自",

"to": "至",

"taskLink": "任務連結",

"lag": "延遲",

"start": "開始",

"finish": "完成",

"enterValue": "請輸入值",

"taskInformation": "任務資訊",

"deleteTask": "刪除任務",

"deleteDependency": "刪除相依關係",

"convert": "轉換",

"save": "儲存",

"above": "上方",

"below": "下方",

"child": "子項",

"milestone": "里程碑",

"toTask": "轉為任務",

"toMilestone": "轉為里程碑",

"eventMarkers": "事件標記",

"leftTaskLabel": "任務左側標籤",

"rightTaskLabel": "任務右側標籤",

"timelineCell": "時間軸儲存格",

"confirmPredecessorDelete": "確定要移除相依連結嗎？",

"taskMode": "任務模式",

"changeScheduleMode": "變更排程模式",

"subTasksStartDate": "子任務開始日期",

"subTasksEndDate": "子任務結束日期",

"scheduleStartDate": "排程開始日期",

"scheduleEndDate": "排程結束日期",

"auto": "自動",

"manual": "手動",

"excelExport": "匯出 Excel",

"csvExport": "匯出 CSV",

"pdfExport": "匯出 PDF",

"unit": "單位",

"work": "工時",

"taskType": "任務類型",

"unassignedTask": "未指派的任務",

"group": "群組",

"FF": "FF",

"FS": "FS",

"SF": "SF",

"SS": "SS"

}

// Define localization for the Gantt chart

ej.base.L10n.load(zh_HantLocale);

function renderGantt(data) {

ej.gantt.Gantt.Inject(ej.gantt.Filter, ej.gantt.Sort, ej.gantt.Selection);

new ej.gantt.Gantt({

locale: "zh-Hant", // 設定語系為繁體中文

dataSource: data,

dateFormat: "yyyy/MM/dd",

timeZone: "UTC",

height: "650px",

taskFields: {

id: "id",

name: "name",

startDate: "startDate",

endDate: "endDate",

child: "subtasks",

columns: [

{ field: "code", headerText: "Code", width: 150 },

{ field: "name", headerText: "任務名稱", minWidth: 100 },

{

field: "startDate",

headerText: "開始時間",

minWidth: 140,

width: 140,

{

field: "endDate",

headerText: "結束時間",

minWidth: 140,

width: 140,

toolbar: [

"ZoomIn",

"ZoomOut",

"ZoomToFit",

"ExpandAll",

"CollapseAll",

], // 工具列按鈕

splitterSettings: {

columnIndex: 4, // 在第5欄後分割

allowFiltering: true,

loadingIndicator: { indicatorType: "Shimmer" },

workUnit: "Day", // 工作單位設為天

includeWeekend: true, // 工作日計算包含週末

autoCalculateDateScheduling: false, // 關閉自動調整日期

readOnly: true, // 設定為唯讀模式，禁止編輯

}).appendTo("#GanttContainer");

}

window.onload = () => {

const normalizedData = normalize(data);

renderGantt(normalizedData);

};

Reference I already followed

I found and tried the approach here, but it did not change the column menu in my case: https://www.syncfusion.com/forums/180075/how-to-apply-localization-to-the-columnmenu-in-ganttchart

Any guidance or a working key list for the Gantt column menu would help. Thanks.

1 Reply 1 reply marked as answer

AG Ajithkumar Gopalakrishnan Syncfusion Team November 11, 2025 01:41 PM UTC

Hi PO-CHUAN,

Greetings from Syncfusion Support,

We have verified the shared details on our end and were able to replicate the reported issue where the filter menu was not translated. This occurred because the grid keywords were incorrect. Below is the proper code snippet to ensure the filter menu and column menu render correctly in the Gantt chart. Please refer to the attached sample.

// wrong key word

'grid': {

'startswith': '開頭是',

'endswith': '結尾是',

'contains': '包含',

'equal': '等於',

'notequal': '不等於',

},

// Solution

"grid": {

...

"StartsWith": "以。。開始",

"EndsWith": "以。。結束",

"Contains": "包含",

"Equal": "等于",

"NotEqual": "不等于",

"LessThan": "小于",

"LessThanOrEqual": "小于或等于",

"GreaterThan": "大于",

"GreaterThanOrEqual": "大于或等于",

"ChooseDate": "選擇日期",

"EnterValue": "輸入值",

"Copy": "複製",

"Group": "按此列分組",

"Ungroup": "按此列取消分組",

"autoFitAll": "自動適合所有列",

"autoFit": "自動適合此列",

"Export": "出口",

"FirstPage": "第一页",

"LastPage": "最后一页",

"PreviousPage": "上一頁",

"NextPage": "下一頁",

"SortAscending": "升序",

"SortDescending": "降序排列",

"EditRecord": "編輯記錄",

"DeleteRecord": "刪除記錄",

"FilterMenu": "過濾",

"SelectAll": "全選",

"Blanks": "空白",

"FilterTrue": "真正",

"FilterFalse": "假",

"NoResult": "找不到匹配項",

"ClearFilter": "清除篩選",

"NumberFilter": "號碼過濾器",

"TextFilter": "文字過濾器",

"DateFilter": "日期過濾器",

"DateTimeFilter": "日期時間過濾器",

"MatchCase": "相符",

"Between": "之間",

"CustomFilter": "自定義過濾器",

"CustomFilterPlaceHolder": "輸入值",

"CustomFilterDatePlaceHolder": "選擇一個日期",

"AND": "和",

"OR": "要么",

"ShowRowsWhere": "在以下位置顯示行：",

"In": "在",

"NotIn": "不在",

"NotStartsWith": "不以開頭",

"Like": "喜歡",

"NotEndsWith": "不以結束",

"NotContains": "不含",

"IsNull": "空",

"NotNull": "不為空",

"IsEmpty": "空的",

"IsNotEmpty": "不是空的",

"AddCurrentSelection": "將當前選擇添加到過濾器",

"UnGroupButton": "单击此处取消分组",

"AutoFitAll": "自动调整所有列",

"AutoFit": "自动调整此列",

"Clear": "清除",

...

Sample link: https://www.syncfusion.com/downloads/support/directtrac/general/ze/gantt

For more information, you may refer to the following link:

https://ej2.syncfusion.com/javascript/documentation/gantt/global-local
https://ej2.syncfusion.com/javascript/documentation/grid/global-local
https://github.com/syncfusion/ej2-locale/blob/master/src/zh.json

If you have any further questions or need additional assistance, please let me know!

Regards,
Ajithkumar G

Marked as answer

Need More Help?

Get personalized assistance from our support team.

Contact Support

1 Reply
2 Participants
Marked answer
Want to subscribe?
SIGN IN
Created by
PH PO-CHUAN HSIEH
Platform
JavaScript - EJ 2
Control
Gantt Chart
Created On
Nov 11, 2025 01:34 AM UTC
Last Activity On
Nov 11, 2025 01:41 PM UTC

Need More Help?

Get personalized assistance from our support team.

Contact Support