AssignmentField

A special field widget used to edit single event assignments.

This field is used as the default editor for the ResourceAssignmentColumn

Assignment field

//<code-header>
fiddle.title = 'Assignment field';
//</code-header>
const project = new ProjectModel({
    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 }
    ]
});

new AssignmentField({
    width        : 400,
    appendTo     : targetElement,
    projectEvent : project.getEventStore().getById(2)
});

Customizing the drop-down grid

The field is a Combo which has a AssignmentGrid as its picker. Here's a snippet showing how to configure the grid:

const gantt = new Gantt({
    appendTo          : 'container',
    resourceImagePath : '../_shared/images/users/',
    columns           : [
        { type : 'name', field : 'name', text : 'Name', width : 250 },
        {
            type        : 'resourceassignment',
            width       : 250,
            showAvatars : true,
            editor      : {
                type   : 'assignmentfield',
                // The picker config is applied to the Grid
                picker : {
                    height : 350,
                    width  : 450,
                    items  : {
                        // configure Work-type resource grid
                        workTab : {
                            features : {
                                filterBar  : true,
                                group      : 'resource.city',
                                headerMenu : false,
                                cellMenu   : false
                            },
                            // The extra columns are concatenated onto the base column set.
                            columns : [{
                                text       : 'Calendar',
                                // Read a nested property (name) from the resource calendar
                                field      : 'resource.calendar.name',
                                filterable : false,
                                editor     : false,
                                width      : 85
                            }]
                        }
                    }
                }
            }
        }
    ],

    project
 });

Built-in widgets

The default toolbar buttons are:

Widget ref	Type	Weight	Description
`saveButton`	Button	100	Save event button on the bbar
`cancelButton`	Button	300	Cancel event editing button on the bbar

To customize the buttons:

const gantt = new Gantt({
    appendTo                : 'container',
    resourceImageFolderPath : '../_shared/images/users/',
    columns                 : [
        {
            type        : 'resourceassignment',
            width       : 250,
            showAvatars : true,
            editor      : {
                type   : 'assignmentfield',
                // The picker config is applied to the Grid
                picker : {
                    height   : 350,
                    width    : 450,
                    bbar : {
                       // Align the Save button to the left and the Cancel button to the right
                       saveButton : {
                           order : -1,
                           style : 'margin-inline-end: auto'
                       }
                    }
                }
            }
        }
    ],

    project
 });

Configs

147

Common

editablePickerField

listenersEvents

Other

picker: AssignmentGridConfig | AssignmentGrid

A config object used to configure the assignment grid used to select resources to assign.

Any columns provided are concatenated onto the default column set.

pickerWidth: Number | String

Width of picker, defaults to this field's pickerAlignElement width

projectEvent: TaskModel

Event to load resource assignments for. Either event or store should be given.

store: Store | StoreConfig

Assignment manipulation store to use, or it's configuration object. Either store or projectEvent should be given

tooltipTemplate: function

A template function used to generate the tooltip contents when hovering this field. Defaults to showing "[Name] [%]"

const gantt = new Gantt({
  columns                 : [
        { type : 'name', field : 'name', text : 'Name', width : 250 },
        {
            type        : 'resourceassignment',
            editor      : {
                type   : 'assignmentfield',
                tooltipTemplate({ taskRecord, assignmentRecords }) {
                    return assignmentRecords.map(as => as.resource?.name).join(', ');
                }
            }
        }
    ]
});

Parameter	Type	Description
`data`	Object	Tooltip data
`data.taskRecord`	TaskModel	The taskRecord the assignments are associated with
`data.assignmentRecords`	AssignmentModel	The field value represented as assignment records