ResourceAssignmentColumn
Column allowing resource manipulation (assignment/unassignment/units changing) on a task. In the column cells,
assignments are either shown as badges or avatars. To show avatars, set showAvatars to true. When
showing avatars there are two options for how to specify image paths:
- You may provide a resourceImagePath on your Gantt panel pointing to where
resource images are located. Set the resource image filename in the
imagefield of the resource data. - And/or you may provide an
imageUrlon your record, which then will take precedence when showing images.
If a resource has no name, or its image cannot be loaded, the resource initials are rendered. If the resource has an eventColor specified, it will be used as the background color of the initials.
//<code-header>
fiddle.title = 'Resource assignment column';
//</code-header>
const gantt = new Gantt({
appendTo : targetElement,
height : 250,
subGridConfigs : {
locked : { flex : 1 },
normal : { collapsed : true }
},
project : {
startDate : new Date(2020, 0, 1),
events : [
{
id : 1,
name : 'Write docs',
expanded : true,
children : [
{ id : 2, name : 'Proof-read docs', startDate : '2020-01-02', endDate : '2020-01-05', effort : 0 },
{ id : 3, name : 'Release docs', startDate : '2020-01-09', endDate : '2020-01-10', effort : 0 }
]
}
],
resources : [
{ id : 1, name : 'John Johnson' },
{ id : 2, name : 'Janet Janetson' },
{ id : 3, name : 'Kermit the Frog' },
{ id : 4, name : 'Kermit the Frog Jr.' }
],
assignments : [
{ id : 1, resource : 1, event : 2, units : 50 },
{ id : 2, resource : 3, event : 2 }
],
dependencies : [
{ id : 1, fromEvent : 2, toEvent : 3 }
]
},
columns : [
{
type : 'resourceassignment',
width : 120,
editor : {
chipView : {
// This template is used when editing the value
itemTpl : assignment => assignment.resourceName
}
},
// This template is used by the column
itemTpl : assignment => assignment.resourceName
}
]
});Default editor is a AssignmentField.
Customizing displayed elements
If showAvatars is false, column will render resource name and utilization wrapped in a small element called a chip. Content of the chip can be customized. For example, if you don't want to see percent value, or want to display different resource name, you can specify an itemTpl config. Please keep in mind that when you start editing the cell, chip will be rendered by the default editor. If you want chips to be consistent, you need to customize the editor too.
new Gantt({
columns: [
{
type : 'resourceassignment',
itemTpl : assignment => assignment.resourceName,
editor : {
chipView : {
itemTpl : assignment => assignment.resourceName
}
}
}
]
});
Subscribing to avatar click events
The owning Gantt instance triggers a resourceAssignmentClick` event when a resource avatar or chip is clicked.
new Gantt({
columns: [
{
type : 'resourceassignment',
showAvatars : true
}
],
listeners : {
resourceAssignmentClick({ taskRecord, resourceRecord, event }) {
console.log(resourceRecord.name);
}
}
});
Configs
86
Configs
86Common
True to allow drag-drop of resource avatars between rows. Dropping a resource outside the resource assignment cells will unassign the resource.
When true, the names of all overflowing resources are shown in the tooltip. When false, the number of
overflowing resources is displayed instead.
Only valid for last shown resource, if there are overflowing resources.
True to show a resource avatar for every assignment. Note that you also have to provide a
resourceImagePath for where to load images from. And/or you may
provide an imageUrl on your record, which then will take precedence when showing images.
Other
A config object passed to the avatar Tooltip
const gantt = new Gantt({
columns : [
{
type : 'resourceassignment',
showAvatars : true,
avatarTooltip : {
// Allow moving mouse over the tooltip
allowOver : true
}
}
]
});
This function will be called with an object containing the fields below:
A function which receives data about the resource and returns a html string to be displayed in the tooltip.
const gantt = new Gantt({
columns : [
{
type : 'resourceassignment',
showAvatars : true,
avatarTooltipTemplate({ resourceRecord }) {
return `<b>${resourceRecord.name}</b>`;
}
}
]
});
This function will be called with an object containing the fields below:
| Parameter | Type | Description |
|---|---|---|
data | Object | |
data.taskRecord | TaskModel | Hovered task |
data.resourceRecord | ResourceModel | Hovered resource |
data.assignmentRecord | AssignmentModel | Hovered assignment |
data.tooltip | Tooltip | The tooltip instance |
data.overflowCount | Number | Number of overflowing resources, only valid for last shown resource |
data.overflowAssignments | AssignmentModel[] | Array of overflowing assignments, only valid for last shown resource |
Rendering
A function which produces the content to put in the resource assignment cell. May be overridden in subclasses, or injected into the column to customize the Chip content.
Defaults to returning ${assignment.resourceName} ${assignment.units}%
| Parameter | Type | Description |
|---|---|---|
assignment | AssignmentModel | The assignment |
index | Number | The index - zero based. |
Integration
Interaction
Menu
Misc
Properties
156
Properties
156Common
True to allow drag-drop of resource avatars between rows. Dropping a resource outside the resource assignment cells will unassign the resource.
When true, the names of all overflowing resources are shown in the tooltip. When false, the number of
overflowing resources is displayed instead.
Only valid for last shown resource, if there are overflowing resources.
True to show a resource avatar for every assignment. Note that you also have to provide a
resourceImagePath for where to load images from. And/or you may
provide an imageUrl on your record, which then will take precedence when showing images.
Class hierarchy
Other
A config object passed to the avatar Tooltip
const gantt = new Gantt({
columns : [
{
type : 'resourceassignment',
showAvatars : true,
avatarTooltip : {
// Allow moving mouse over the tooltip
allowOver : true
}
}
]
});
This function will be called with an object containing the fields below:
A function which receives data about the resource and returns a html string to be displayed in the tooltip.
const gantt = new Gantt({
columns : [
{
type : 'resourceassignment',
showAvatars : true,
avatarTooltipTemplate({ resourceRecord }) {
return `<b>${resourceRecord.name}</b>`;
}
}
]
});
This function will be called with an object containing the fields below:
| Parameter | Type | Description |
|---|---|---|
data | Object | |
data.taskRecord | TaskModel | Hovered task |
data.resourceRecord | ResourceModel | Hovered resource |
data.assignmentRecord | AssignmentModel | Hovered assignment |
data.tooltip | Tooltip | The tooltip instance |
data.overflowCount | Number | Number of overflowing resources, only valid for last shown resource |
data.overflowAssignments | AssignmentModel[] | Array of overflowing assignments, only valid for last shown resource |
Rendering
A function which produces the content to put in the resource assignment cell. May be overridden in subclasses, or injected into the column to customize the Chip content.
Defaults to returning ${assignment.resourceName} ${assignment.units}%
| Parameter | Type | Description |
|---|---|---|
assignment | AssignmentModel | The assignment |
index | Number | The index - zero based. |
Editing
Integration
Interaction
JSON
Menu
Misc
Parent & children
Functions
77
Functions
77Configuration
Editing
Events
Identification
Misc
Other
Parent & children
Events
5
Events
5Event handlers
5
Event handlers
5Typedefs
2
Typedefs
2CSS variables
1
CSS variables
1| Name | Description |
|---|---|
--b-resource-assignment-column-avatar-background | Background for avatars in the resource assignment column |