The page freezes when loading data

The problem is as follows: When the data returned from the backend contains some transliterated characters such as %, etc. in the “text” field, it causes the front-end page to freeze and fail to respond. I don’t know if this is the cause.I can upload my data. Could you please help me identify the problem?
1.md (278.3 KB)

Hello @wqh,

Thank you for sharing your dataset.

The problem is not related to special characters (such as %) in the text field. Gantt handles such characters correctly, and they do not cause the page to freeze.

The actual issue is caused by an invalid task structure in your data. Specifically, you have a task with:

  • "id": "0"
  • "parent": "0"

This creates a circular reference, where the task is set as its own parent. As a result, Gantt enters an infinite loop while building the task hierarchy, which causes the page to freeze.

Additionally, in DHTMLX Gantt, “0” is reserved as the default ID of the virtual root task (see the root_id property in the documentation). So, if you haven’t changed the root_id value, you should not assign "id": "0" to any real task. Doing so conflicts with the internal root node and breaks the data structure.

You can set another ID for the root virtual task:

gantt.config.root_id = 'root';

and assign this value to the parent property of the task:

{
  "tasks": [
        {
                "id": "0",
                "code": "0",
                "projId": 1,
                "text": "14.1 work program shambo - Bako",
                "parent": "root",  // !
                "level": 1,
                "completePctType": null,
                "progress": null,
                "physCompletePct": null,
                "duration": null,
                "seqNum": 0,
                "type": "project",
                "open": true,
                "drivingPathFlag": null,
                "ownerId": null,
                "ext": null,
                "od": 0,
                "ed": 0,
                "bod": 0,
                "bed": 0,
                "data_date": "2016-07-10 17:00:00",
                "target_start_date": "2018-11-13 08:00:00",
                "target_end_date": "2021-11-12 17:00:00",
                "start_date": null,
                "end_date": null,
                "actual_start_date": null,
                "actual_end_date": null,
                "expect_end_date": null,
                "actual_duration": null,
                "remain_duration": null,
                "calendar_id": 5,
                "clndr_name": null,
                "task_type": null,
                "cstr_type": null,
                "cstr_date": null,
                "cstr_type2": null,
                "cstr_date2": null,
                "free_float": null,
                "total_float": null,
                "target_cost": null,
                "manual_complete_pct": null,
                "num_complete_pct": null,
                "target_work_qty": 0.000000,
                "act_work_qty": null,
                "target_equip_qty": 0.000000
            },
           // ... other tasks
    ]
}

Alternatively, change the ID of this task to avoid a conflict with the root virtual task.

Best regards,
Valeria Ivashkevich
DHTMLX Support Engineer

Thank you for your help.