[ANGULAR] id collision using combo selector in column

[bherford]

Hi Team,

I am working on adding a dropdown selector to my location column,

        { type : 'locationcolumn', field: 'location', text : 'Location'},

that displays a list of locations to choose from. I am building a custom js file called LocationColumn.js for this column:

/**
 * Status Column implementation file
 */

// Bryntum umd lite bundle comes without polyfills to support Angular's zone.js
import { Column, ColumnStore } from '@bryntum/gantt/gantt.lite.umd.js';

/**
 * @module LocationColumn
 */

/**
 * A column showing the status of a task
 *
 * @extends Gantt/column/Column
 * @classType locationcolumn
 */
export default class LocationColumn extends Column {

    static get $name() {
        return 'LocationColumn';
    }

    static get type() {
        return 'locationcolumn';
    }

    static get isGanttColumn() {
        return true;
    }

    static get defaults() {
        return {
            // Set your default instance config properties here
            field      : 'location',
            text       : 'Location',
            editor     : false,
            cellCls    : 'b-status-column-cell',
            htmlEncode : false,
            editor : {
                type  : 'combo',
                items : []
            }
        };
    }

    //endregion

    renderer({ record }) {

const itemList = []

record._parent.children.forEach(element => {
    itemList.push(element._data.location)
});

this.data.editor.items = itemList
return location

    }

}

ColumnStore.registerColumnType(LocationColumn);

When I run my code I do not get any errors until I expand my tasks and double click on the column cell, then I get

Screen Shot 2022-01-24 at 4.40.19 PM.png (301.25 KiB) Viewed 389 times

in my browser console.

I know this was a known issue in the past after doing some research viewtopic.php?f=44&t=12097&start=10

Is there a best practice here that I am missing? I attached a copy of my gantt.config.ts as well

Thanks,
Brandon

[alex.l]

To load data to the editor, please use ON-OWNER event https://bryntum.com/docs/gantt/api/Gantt/feature/CellEdit#event-beforeCellEditStart

    listeners : {
        beforeCellEditStart: ({ source, editorContext }) => {
            if (editorContext.column.field == 'location') {
                const itemList = []
                editorContext.record.parent.children.forEach(r => itemList.push(r.location) );
                editorContext.editor.items = itemList;
            }
        }
    }

configs should be used only for initialization.

[bherford]

Thank you Alex,

Can you give me some guidance for where to position your code in the file? This is where I have it now, but it does not appear to populate the list:

static get defaults() {
        return {
            // Set your default instance config properties here
            field      : 'location',
            text       : 'Location',
            editor     : false,
            cellCls    : 'b-status-column-cell',
            htmlEncode : false,
            editor : {
                type  : 'combo',
                items : [],
            },
            listeners : {
                beforeCellEditStart: ({ source, editorContext }) => {
                    if (editorContext.column.field == 'location') {
                        const itemList = []
                        editorContext.record.parent.children.forEach(r => itemList.push(r.location) );
                        editorContext.editor.items = itemList;
                    }
                }
            }
        };
    }

Thanks

[alex.l]

on-owner means that the event is triggered by the gantt, so it should be gantt's listener

[bherford]

Alex, I realized what I was missing:

    [listeners]               = "ganttConfig.listeners" 

in my

gantt.component.html

.

Now it works, thanks