Page 1 of 2

[ANGULAR] Manually modify dropdown items

Posted: Fri Jan 13, 2023 9:23 am
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);


Re: [ANGULAR] Manually modify dropdown items

Posted: Fri Jan 13, 2023 4:13 pm
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??


Re: [ANGULAR] Manually modify dropdown items

Posted: Mon Jan 16, 2023 2:42 am
by shimnx

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


Re: [ANGULAR] Manually modify dropdown items

Posted: Mon Jan 16, 2023 7:07 am
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


Re: [ANGULAR] Manually modify dropdown items

Posted: Mon Jan 30, 2023 4:51 am
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,
        };
    }

Re: [ANGULAR] Manually modify dropdown items

Posted: Mon Jan 30, 2023 5:14 am
by tasnim

Hello,

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


Re: [ANGULAR] Manually modify dropdown items

Posted: Mon Jan 30, 2023 6:04 am
by shimnx

When the data is initialized


Re: [ANGULAR] Manually modify dropdown items

Posted: Mon Jan 30, 2023 6:47 am
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'
}

Re: [ANGULAR] Manually modify dropdown items

Posted: Mon Jan 30, 2023 9:33 am
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


Re: [ANGULAR] Manually modify dropdown items

Posted: Mon Jan 30, 2023 9:41 am
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?