Can I insert custom data while using visual: true in dhtmlx gantt?

Gantt Vue.js Gantt
#1

In order to display the timeline, the visual option needs to be set to true, but when exporting to Excel with the visual option set to true, this error occurs.

error message: Internal server error. Error: Gantt to Excel. TypeError: excelRefs variable sent to mergeCells function must be an array with length > 0

The code I executed is as follows, and generally, when the visual value is not set, everything except the timeline is displayed correctly.

code: gantt.exportToExcel({
name: ,
server: ,
local: ,
columns: customComlumns,
cellColors: true,
data: customData,
visual: true
})

#2

Hello,
This is a known issue, and over time, the developers will resolve it. In the meantime, I can suggest a workaround: Simulate “task loading” by extending the timeline, obtain the cell numbers for the $start and $end parameters, export the data, and then restore the initial date range:


function exportData() {
    // Backup the original date range
    const backupStartDate = gantt.copy(gantt.config.start_date);
    const backupEndDate = gantt.copy(gantt.config.end_date);

    // Get tasks within the current date range
    const tasks = gantt.copy(gantt.getTaskByTime());

    const json = tasks.map(task => {
        task.text += "_mod";
        return task;
    });

    // Calculate min and max date range based on tasks
    let minDate = gantt.date.add(json[0].start_date, -2, 'day');
    let maxDate = gantt.date.add(json[0].end_date, 2, 'day');

    json.forEach(task => {
        if (+task.start_date < +minDate) minDate = new Date(task.start_date);
        if (+task.end_date > +maxDate) maxDate = new Date(task.end_date);
    });

    // Update Gantt date range
    gantt.config.start_date = minDate;
    gantt.config.end_date = maxDate;
    gantt.render();

    // Map task data for export
    json.forEach(task => {
        task.$start = gantt.getScale().trace_indexes[+task.start_date];
        task.$end = gantt.getScale().trace_indexes[+task.end_date];
        task.$type = task.type || 'task';
        task.$text = task.text;
    });

    // Export to Excel
    gantt.exportToExcel({
        visual: true,
        columns: [
            { id: "text", header: "Action" },
            { id: "start_date", header: "Start date", type: "date" },
            { id: "end_date", header: "End date", type: "date" },
            { id: "duration", header: "Duration" },
            { id: "owner", header: "Who" },
            { id: "progress", header: "% Done", type: "number" }
        ],
        data: json
    });

    // Restore original date range
    gantt.config.start_date = backupStartDate;
    gantt.config.end_date = backupEndDate;
    gantt.render();
}

You can see a working example here: DHTMLX Snippet Tool