[ANGULAR] Resource Utilization – Using a Resource in Multiple Hierarchical Levels

[pfund]

Hello,

I am currently working with the Resource Utilization component and would like to assign the same resource across multiple hierarchical levels. However, when I try to configure it this way, I receive an “Id Collision” error.

Could you please clarify whether it is supported to include the same resource in different hierarchy levels? And if so, what would be the correct approach to configure this without running into ID conflicts?

Thank you in advance for your support.

Best regards

[alex.l]

Hi,

Please explain your logic a bit, what did you mean by "assign the same resource across multiple hierarchical levels"? Histogram shows tasks grouped by resource, how should it looks like in your version?
Did you see our guide https://bryntum.com/products/gantt/docs/guide/SchedulerPro/resourceviews/resourceutilization ? It might give you some inspiration how it works.

[pfund]

We would like to assign the same resource to different teams, so that it appears multiple times in the resource utilization view depending on the team context. I’ve attached a screen design showing the resource current.user included twice.

[alex.l]

Hi,

Got it!

Here is a demo if multi tree groups using Scheduler (will be working same on ResourceUtilizartion) https://bryntum.com/products/scheduler/examples/multi-treegroups/

Here is a demo code for ResourceUtilization

const resourceUtilization = new ResourceUtilization({
    project : {
        resources : [
            { id : 1, name : 'Mike', city : ['Stockholm'] },
            { id : 2, name : 'Dan', city : ['Tokio']  },
            { id : 3, name : 'Robert', city : ['Stockholm', 'Tokio']  }
        ],

    events : [
        { id : 1, startDate : '2023-03-20', duration : 5, durationUnit : 'd', name : 'Event 1' },
        { id : 2, startDate : '2023-03-24', duration : 5, durationUnit : 'd', name : 'Event 2' }
    ],

    assignments : [
        { event : 1, resource : 1 },
        { event : 2, resource : 2 },
        { event : 1, resource : 3 },
        { event : 2, resource : 1 }
    ]
},

features : {
    treeGroup : {
        levels : [
            // by city
            ({ origin }) => origin.isResourceModel ? origin.city : origin.resource.city,
            // by resource ..if that's an unassigned resource just stop grouping
            ({ origin }) => origin.isResourceModel ? Store.StopBranch : origin.resource
        ]
    }
},

columns : [
    {
        type  : 'tree',
        field : 'name',
        width : 150,
        renderer({ value }) {
            // if value has resource model (it's a group row) display the resource name
            if (value.isResourceModel) {
                return value.name;
            }
            return value;
        }
    }
],
startDate  : new Date(2023, 2, 20),
endDate    : new Date(2023, 2, 30),
appendTo   : targetElement,
rowHeight  : 40,
tickSize   : 40,
minHeight  : '20em',
// display tooltip
showBarTip : true
});

Tested in our demo here https://bryntum.com/products/gantt/docs/guide/SchedulerPro/resourceviews/resourceutilization#grouping-support

Screenshot 2025-09-08 at 15.05.29.png (300.1 KiB) Viewed 2540 times