Our state of the art Gantt chart


Post by shimnx »

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?

Attachments
屏幕截图 2022-05-20 112252.png
屏幕截图 2022-05-20 112252.png (7.76 KiB) Viewed 515 times

Post by alex.l »

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

All the best,
Alex


Post by shimnx »

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);

Post by alex.l »

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.

All the best,
Alex


Post by shimnx »

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


Post by alex.l »

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.

All the best,
Alex


Post by shimnx »

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?


Post by alex.l »

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.

All the best,
Alex


Post by shimnx »

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

Attachments
advanced examples.zip
(137.56 KiB) Downloaded 38 times

Post by alex.l »

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.

All the best,
Alex


Post Reply