Lightbox from Task to Project type

[rldn21]

When changing the task type from Task to Project in the lightbox, the lightbox popup disappears. (only in version 9).

Error in console: index.js:534 Uncaught TypeError: Cannot read properties of null (reading 'nextSibling') at Xa.t._set_lightbox_values (index.js:534:64) at Xa.t._silent_redraw_lightbox (index.js:807:9) at t.changeLightboxType (gantt_core.js:326:9) at k.onchange (typeselect_control.js:37:10)

[gearcoded]

@rldn21, I couldn't reproduce that issue in the sample: https://docs.dhtmlx.com/gantt/samples/01_initialization/16_projects_and_milestones.html

Probably, the issue is related to the Gantt configuration, but it is hard to suggest what might be wrong as I don't see your code. Please add your configuration to the following snippet and make sure that the issue is reproduced there: https://snippet.dhtmlx.com/40tsh9uz Then, click on the Save button and send me the link. Or send me a ready demo with all the necessary JavaScript and CSS files so that I can reproduce the issue locally.

[rldn21]

@gearcoded

https://snippet.dhtmlx.com/p901d3zk

Thanks in advance!

[gearcoded]

@rldn21, Thank you for sharing the snippet. I was able to reproduce the issue. It seems you are using the Standard (GPL) version. The type select section is not supposed to work there as the types should only work in the Pro version:

https://files.dhtmlx.com/30d/0cc793583ae8f5698d1f14a881e70333/screenshot_20241031_121130.png

https://files.dhtmlx.com/30d/4743d5d1bb3d80c59665d0a0ec6fa163/screenshot_20241031_121240.png

These features were working in the 7.1 and 8.0 GPL versions due to a bug in Gantt. But that bug was fixed in the 9.0 version, so, now, it doesn't work in the free version.

The expected behavior is to not render the section or not show the expected elements like it works with the resources section: https://snippet.dhtmlx.com/lb6vklcs

I will add it as a bug to our internal bug tracker, so, it will be fixed in the future.

If you added the GPL version by a mistake, you need to remove it, then it will work as expected: https://files.dhtmlx.com/30d/cd7514012a2b2db745fb4d41f95b1047/vokoscreen-2024-10-31_12-23-14.mp4

[rldn21]

Thank you for your reply! I upgraded my script from version 8 indeed. There it was working.

In the .mp4 i see you remove the lines:

<script src="https://cdn.dhtmlx.com/gantt/edge/dhtmlxgantt.js"></script>

Without that, the gantt doesnt work of course.... Any suggestions?

[gearcoded]

@rldn21, If you use the Pro version, you just need to connect the correct files, and it will work as expected.

If you use the Standard (GPL) version, you cannot use the Pro features. So, if you want to have the task types feature, you need to manually implement it by using the Gantt API and Javascript. And then you can add a select lightbox section to switch between the types:

var taskTypes = [
    { key: "task", label: "Task" },
    { key: "project", label: "Project" },
    { key: "milestone", label: "Milestone" }
];

gantt.config.lightbox.sections = [
    { name: "description", height: 70, map_to: "text", type: "textarea", focus: true },
    { name: "select", height: 60, type: "select", map_to: "type", options: taskTypes },
    {
        name: "color", height: 60, map_to: "color", type: "select", options: [
            { key: "#1c3661", label: "Standaard" },
            { key: "#660A38", label: "Purple" },
            { key: "#E6178A", label: "Pink" },
            { key: "#26E4FF", label: "Turquoise" },
            { key: "#008A99", label: "Mint" },
            { key: "#14C528", label: "Green" },
            { key: "#FFCC00", label: "Yellow" },
            { key: "#E66900", label: "Orange" },
            { key: "#CCCCCC", label: "Grey" },
        ]
    },
    { name: "time", height: 60, type: "duration", map_to: "auto" }
];
gantt.config.lightbox.project_sections = [
    { name: "description", height: 70, map_to: "text", type: "textarea", focus: true },
    { name: "select", height: 40, type: "select", map_to: "type", options: taskTypes },
    {
        name: "color", height: 40, map_to: "color", type: "select", options: [
            { key: "#1c3661", label: "Standaard" },
            { key: "#CCCCFF", label: "Purple" },
            { key: "#E6178A", label: "Pink" },
            { key: "#26E4FF", label: "Turquoise" },
            { key: "#40E0D0", label: "Mint" },
            { key: "#9FE2BF", label: "Green" },
            { key: "#DFFF00", label: "Yellow" },
            { key: "#FFBF00", label: "Orange" },
            { key: "#CCCCCC", label: "Grey" },
            { key: "#000000", label: "Black" },
        ]
    },
    { name: "time", height: 40, type: "duration", map_to: "auto" }
];

https://docs.dhtmlx.com/gantt/desktop__select.html

Here is the updated snippet: https://snippet.dhtmlx.com/cn9sym1p

Another way is to use the latest available 8.0 version where the bug with the Pro features in the GPL version wasn't fixed.