AddNewColumn

This column allows user to dynamically add columns to the Gantt chart by clicking the column header and picking columns from a combobox.

Customizing the combobox store data

In order to add, update or remove a column from the combobox one can use processComboStoreConfig config:

new Gantt{{
    columns : [
        {
            type : 'addnew',
            processComboStoreConfig({ config, column }) {
                // Add a new custom column to the combobox
                config.data.push({
                    text  : 'Custom date',
                    // column config
                    value : {
                        type  : 'date',
                        field : 'customDate',
                        text  : 'Custom date'
                    }
                });
            }
        }
    ]
}}

Adding a custom column class

In order to appear in the column combobox list a column class have to fulfill these conditions:

1. the class should have a static property type with unique string value that will identify the column.
2. the class should be registered with the call to ColumnStore.registerColumnType.
3. the class should have a static property isGanttColumn with truthy value.
4. the class should have a static text property with column name.

For example:

import ColumnStore from 'gantt-distr/lib/Grid/data/ColumnStore.js';
import Column from 'gantt-distr/lib/Grid/column/Column.js';

// New column class to display task priority
export default class TaskPriorityColumn extends Column {
    // unique alias of the column
    static type = 'priority';

    // indicates that the column should be present in "Add New..." column
    static isGanttColumn = true;

    static defaults = {
        // the column is mapped to "priority" field of the Task model
        field : 'priority',
        // the column title
        text  : 'Priority'
    };
}

// register new column
ColumnStore.registerColumnType(TaskPriorityColumn);