Premium support for our pure JavaScript UI components


Post by vasyl obukh »

Hi,
Could you please help with the issue I have when using the TreeGroup feature?

I want to be able to group resources by multiple fields, some of which have array data. Here's an example of such data:

    "group": "Group 2",
    "skills": ["skill 1", "skill 2"]

When I apply groups in such order

schedulerPro.group(["group", "skills"])

then it's applied correctly because at the top is the column that has a string value.
But if I apply it in reverse order

schedulerPro.group(["skills", "group"])

then it throws this error

gantt.module.js:10 Uncaught (in promise) Error: Id collision on generated_skill_2_Group_1_

You can watch both scenarios in the attached video. The code example is also attached.

Attachments
Screen-Recording-2024-03-01-at-9.40.09 AM.mp4
(2.08 MiB) Downloaded 35 times
tree-group-array-column-issue.zip
(295 KiB) Downloaded 26 times

Post by tasnim »

Hi,

I'm not able to reproduce it. What version are you using?

Screenshot 2024-03-01 210904.png
Screenshot 2024-03-01 210904.png (54.95 KiB) Viewed 521 times

Post by vasyl obukh »

Hi Tasnim,
I used gantt-5.6.6 (but I just tried 5.6.7 and it's the same) and I see this issue in Chrome, Edge, and Firefox

Last edited by vasyl obukh on Sun Mar 03, 2024 8:40 pm, edited 1 time in total.

Post by tasnim »

Hi,

Sorry, maybe I missed something. Are you able to reproduce that issue here https://bryntum.com/products/gantt/examples/gantt-schedulerpro/? If you can, could you please share the steps to reproduce?


Post by vasyl obukh »

Hi Tasnim,
Yes, I can reproduce it there. Here's the code

import { Splitter, WidgetHelper, Gantt, SchedulerPro, ProjectModel } from '../../build/gantt.module.js?474608';
import shared from '../_shared/shared.module.js?474608';

// Project that will be shared by Gantt & SchedulerPro
const project = window.project = new ProjectModel({
    startDate : '2019-01-16',
    endDate   : '2019-02-13',

// General calendar is used by default
calendar : 'general',

transport : {
    load : {
        url : '../_datasets/launch-saas.json'
    }
},
autoLoad : true,

// This config enables response validation and dumping of found errors to the browser console.
// It's meant to be used as a development stage helper only so please set it to false for production systems.
validateResponse : true,
resourceStore: { fields: [{ name: "skills", defaultValue: ["skill 1", "skill 2"] }, { name: "group", defaultValue: "Group 1" }]}
});

const gantt = new Gantt({
    project,

tbar : [
    {
        type : 'widget',
        html : 'Zoom:'
    },
    {
        ref      : 'zoomInButton',
        icon     : 'b-icon-search-plus',
        tooltip  : 'Zoom in',
        onAction : () => gantt.zoomIn()
    },
    {
        ref      : 'zoomOutButton',
        icon     : 'b-icon-search-minus',
        tooltip  : 'Zoom out',
        onAction : () => gantt.zoomOut()
    }
],

resourceImageFolderPath : '../_shared/images/users/',
appendTo                : 'container',
flex                    : 1,
features                : {
    labels : {
        left : {
            field  : 'name',
            editor : {
                type : 'textfield'
            }
        }
    }
},

viewPreset  : 'weekAndDayLetter',
columnLines : true,

columns : [
    { type : 'sequence', minWidth : 50, width : 50, text : '', align : 'right', resizable : false },
    { type : 'name', width : 280 },
    { type : 'percent', text : '% Completed', field : 'percentDone', showValue : false, width : 160 },
    { type : 'resourceassignment', text : 'Assigned Resources', showAvatars : true, width : 160 }
],

startDate : '2019-01-11',

listeners : {
    beforeCellEditStart : ({ editorContext }) => editorContext.column.field !== 'percentDone' || editorContext.record.isLeaf
}
});

new Splitter({
    appendTo : 'container'
});

const scheduler = new SchedulerPro({
    project,

appendTo            : 'container',
minHeight           : '20em',
flex                : 1,
partner             : gantt,
rowHeight           : 45,
eventColor          : 'gantt-green',
useInitialAnimation : false,

resourceImagePath : '../_shared/images/users/',

features : {
    dependencies : true,
    percentBar   : true,
tree: true,
treeGroup: true,
    },

columns : [
    {
        type           : 'resourceInfo',
        field          : 'name',
        text           : 'Resource',
        showEventCount : false,
        width          : 330
    },
    {
        field          : 'group',
        text           : 'Resource',
        showEventCount : false,
        width          : 330
    },
{
            field          : 'skills',
            text           : 'Resource',
            showEventCount : false,
            width          : 330
        },
    ]
});

Without skills and group fields in the resource data objects it doesn't throw that error as there's no ID collision in that case. So here I just added default values and with them it shows another error.

Screenshot 2024-03-03 at 8.38.06 PM.png
Screenshot 2024-03-03 at 8.38.06 PM.png (655.52 KiB) Viewed 430 times

It's better to just download my example as it has all those field in the json file. So to reproduce simply put folder with example code into /examples in gantt-5.6.7. Run http-server from root. And go to /tree-group-array-column-issue


Post by tasnim »

Thank you very much for the detailed report and helping to reproduce the issue. We'll investigate it. Here is the ticket to track progress https://github.com/bryntum/support/issues/8725.

Best regards,
Tasnim


Post by vasyl obukh »

Hi,
Has there been any progress on this bug?


Post by ghulam.ghous »

Unfortunately no updates yet. But as you can see the ticket is already marked as high-priority, it will be resolved soon. You can subscribe to the ticket to get notified when it is done.

High-priority tickets usually takes 3-4 weeks timespan to get fixed but nowadays our team is bit busy with 6.0.0. But I'll drop a message to our project manage to prioritise it.


Post Reply