Our state of the art Gantt chart


Post by shimnx »

I have customized the StatusColumn column, which is of the dropdown type. By default, it has four options: 'To Do', 'Doing', 'Done', 'Cancelled'. My question is how to manually modify these default options

import { Column, ColumnStore } from '@bryntum/gantt';

/**
 * @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     : {
                type : 'dropdown',
                items : ['To Do', 'Doing', 'Done', 'Cancelled']
            },
            cellCls    : 'b-status-column-cell',
            htmlEncode : false,
        };
    }

    //endregion

    renderer({ record,isExport}) {
        const status = record.status;
        // console.log(record)
        if(isExport){
            return status
        }else{
            return status ? {
                // tag       : 'i',
                className : `${status}`,
                html      : status
            } : '';
        }
    }

}

ColumnStore.registerColumnType(StatusColumn);


Post by marcio »

Hey shimnx,

What do you mean by

manually modify these default options

??

If you change this part

 items : ['To Do', 'Doing', 'Done', 'Cancelled']

It'll change the options, so if you put something like

 items : ['To Do', 'Doing', 'Done', 'Cancelled', 'Thinking', 'Projecting']

Those two last items will be available in the dropdown, is this what you're looking for??

Best regards,
Márcio


Post by shimnx »

Yes, and not only do you add new items, you might also need to delete them


Post by tasnim »

Here is an example of how you can delete items

gantt.columns.get('status').editor.store.remove(gantt.columns.get('status').editor.store.records[0]);

Docs :
https://bryntum.com/products/gantt/docs/api/Grid/data/ColumnStore
https://bryntum.com/products/gantt/docs/api/Grid/data/ColumnStore#function-get
https://bryntum.com/products/gantt/docs/api/Core/data/Store#function-remove

And if you want to remove all items then you could use this
https://bryntum.com/products/gantt/docs/api/Core/data/Store#function-removeAll

Good Luck :),
Tasnim


Post by shimnx »

Before, I used to match the fields directly according to the text. Now I want to match the displayed text by id. What should I do

This is my previous one

 static get defaults() {
        return {
            // Set your default instance config properties here
            field: 'status',
            text: 'Status',
            editor: {
                type: 'dropdown',
                items: ['To Do', 'Doing', 'Done', 'Cancelled']
            },
            cellCls: 'b-status-column-cell',
            htmlEncode: false,
        };
    }

This is the present

 static get defaults() {
        return {
            // Set your default instance config properties here
            field: 'status',
            text: 'Status',
            editor: {
                type: 'dropdown',
                items: [{ 'text': 'To Do', 'id': '0' }, { 'text': 'Doing', 'id': '1' }, { 'text': 'Done', 'id': '2' }, { 'text': 'Cancelled', 'id': '3' }]
            },
            cellCls: 'b-status-column-cell',
            htmlEncode: false,
        };
    }

Post by tasnim »

Hello,

When do you want to match the displayed text with the id?


Post by shimnx »

When the data is initialized


Post by tasnim »

Ok.
I believe this https://bryntum.com/products/gantt/docs/api/Core/widget/Combo#config-valueField is what you're looking for

You just need to set

{
	valueField : 'text'
}

Post by shimnx »

After I double click it doesn't show text, it still shows the id, and I want it to always show the text corresponding to the id. And the text is empty when I select it

Attachments
媒体1.mp4
(481.36 KiB) Downloaded 15 times

Post by tasnim »

Have you defined the status field in TaskModel
Please check this https://bryntum.com/products/gantt/docs/api/Gantt/model/TaskModel#subclassing-the-taskmodel-class

If you've already defined the status field into TaskModel. And still, you're facing this issue
Then, Could you please upload your app here so we can reproduce and debug it?


Post Reply