Bryntum Support Forums

We want to double click the status bar to bring up a dropdown selection box, let the user manually modify the status, and listen for its state change, is this possible? Or should we add a new column?

It is possible. You can find StatusColumn.js in our advanced example. Check that editor set to false in there. All you need is to specify the one you want.
https://bryntum.com/docs/gantt/api/Grid/column/Column#config-editor

I set editor to true, but it still can't be edited manually

/*
 * @Description:
 * @Version: 2.0
 * @Autor: shimnx
 * @Date: 2022-05-18 18:17:27
 * @LastEditors: shimnx
 * @LastEditTime: 2022-05-20 13:25:43
 */
/**
 * 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 StatusColumn
 */

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

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

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

    static get isGanttColumn() {
        return true;
    }

    static get defaults() {
        return {
            // Set your default instance config properties here
            field      : 'status',
            text       : 'Status',
            editor     : true,
            cellCls    : 'b-status-column-cell',
            htmlEncode : false,
            filterable : {
                filterField : {
                    type  : 'combo',
                    items : ['Not Started', 'Started', 'Completed', 'Late']
                }
            }
        };
    }

    //endregion

    renderer({ record }) {
        const status = record.status;

return status ? {
    tag       : 'i',
    className : `b-fa b-fa-circle ${status}`,
    html      : status
} : '';
    }

}

ColumnStore.registerColumnType(StatusColumn);

Please check your code. If you copied our Task.js for your data model, you can see how we get status. It's calculated readOnly field based on others fields of task record ( see this.isCompleted, this.isLate, etc.). To have it "edited manually", create your own logic for that - remove/change our code, add that field to your JSON.

I've seen the code for the example and its state is read-only, but I'm still not sure how to change it to be manually modifiable, or how to add a new column

Not sure I got your question. You have example of how to create new column (StatusColumn.js - is an example of how to create a new column).
It's editable by default, just remove all custom code that you copied from our example.

I can now change status via the input field, but it will get an error, and how do I change the input field to a drop-down selection?

I can now change status via the input field, but it will get an error

Please share runnable test case, we will check your code.

how do I change the input field to a drop-down selection?

Did you see docs I shared: https://bryntum.com/docs/gantt/api/Grid/column/Column#config-editor ?
We also have online demo here https://bryntum.com/examples/grid/celledit , check the source code.
It works same for all columns in all components since all of them are based on grid.

Thank you, I now switch to the drop down selection box, error message I took a screenshot, you can run my code

Error message says:

zone.js:1213 Uncaught Error: Uncaught (in promise): TypeError: Cannot set property status of [object Object] which has only a getter

So, that happened because you have only getter defined.
As I recommended above, you need to remove our custom getter and just add that field into fields, since it's just simple field:

export default class Task extends TaskModel {

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

static get fields() {
    return [
        { name : 'deadline', type : 'date' },
        'status' // all you need is this line.
    ];
}

// not sure if you need this
get isLate() {
    return this.deadline && Date.now() > this.deadline;
}
}

and, of course, send value from your server-side with value for that field.