Ability to close AssignmentPicker from `cancel` and `save` buttons only

[ghulamghousdev]

Forum post

When I select a resource, then upon saving, it will return the selectedRecords. However, when I choose "none" as the assigned resource and then save, selectedRecords will be zero. So, I need the record corresponding to the row where I chose "none" as the assigned resource so that I can get the record id and update in the database that no assigned resource is assigned here.

Can we style the save and cancel buttons in the AssignmentField picker? Additionally, we need to change their position, with the cancel button on the left side and the save button on the right side.

I need the cancel and save buttons to be positioned and styled like these.

import { Gantt, AjaxHelper, ProjectModel, StringHelper, WidgetHelper, AssignmentField } from '../../build/gantt.module.js?475735';
import shared from '../_shared/shared.module.js?475735';

const project = window.project = new ProjectModel({
    transport : {
        load : {
            url : '../_datasets/launch-saas.json'
        }
    },
    // 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
});

const gantt = new Gantt({
    appendTo                : 'container',
    resourceImageFolderPath : '../_shared/images/users/',
    columns                 : [
        { type : 'name', field : 'name', text : 'Name', width : 250 },
        {
            type        : 'resourceassignment',
            width       : 250,
            showAvatars : true,
            avatarTooltipTemplate({ resourceRecord }) {
				return `<b>${resourceRecord.name}</b>`;
			},
            editor: {
				type   : AssignmentField.type,
				chipView: {
					scrollable: null,
					// This template is used when editing the value
					itemTpl(resourceRecord) {

					resourceRecord = resourceRecord.data.resource.data;

					var initials = resourceRecord.name,
					htmlContent;

					if (resourceRecord.imageUrl) {
						htmlContent = `<img data-btip="${resourceRecord.name}" class="b-resource-avatar b-resource-image" draggable="false" loading="lazy" alt="${resourceRecord.name}" src="${resourceRecord.imageUrl}" role="presentation">`;
					}
					else {
						htmlContent = `<div data-btip="${resourceRecord.name}" class="b-resource-avatar b-resource-initials" role="presentation">${initials}</div>`;
					}
					return htmlContent;
				}
			},
			tooltipTemplate({ assignmentRecords }) {
				return assignmentRecords.map(as => `${as.resource?.name}`);
			},
			picker : {
				cls: 'b-resources-picker',
				selectionMode: {
					rowCheckboxSelection: true,
					multiSelect: false,
					showCheckAll: false,

				},
				unitsColumn: {hidden: true },
				height   : 350,
				width    : 450,
				features : {
					filterBar  : true,
					headerMenu : false,
					cellMenu   : false
				},
			}
		}
    }
],

project,

dependencyIdField : 'sequenceNumber'
});

project.load();

let count = 0;

// listen when the cell edit start
gantt.on('startCellEdit', (event) => {
    // if the column is resources assignment column and the listener is not set then go inside
    if (event.editorContext.column.type === "resourceassignment" && count === 0) {
        // listen to the save button
        gantt.features.cellEdit.editor.inputField.picker.widgetMap.saveBtn.on('click', ({ source }) => {
            // getting the selected Records
			debugger;
            const { selectedRecords } = source.parent.parent;
			
		if(selectedRecords.length > 0) {
			var taskId = selectedRecords[0].data.eventId, // current row id
				taskStore = gantt.taskStore,
				taskItem = taskStore.getById(taskId), // Get the record
				assigneeId = typeof selectedRecords[0].data.resourceId !== undefined ? selectedRecords[0].data.resourceId : 0;
		}
		
    });
    count = 1;
}
});