Our state of the art Gantt chart


Post by casman.manzano »

How do I add a new column to my gantt chart? I added this under columns and it stopped displaying the gantt chart.

Also, are there more examples done in Angular? i have the trial zip but I was hoping there'd be more I can browse.... thanks a lot

Attachments
randomcol.JPG
randomcol.JPG (66.43 KiB) Viewed 481 times

Post by mats »

That looks correct assuming you have defined and imported your custom column. Example:

import Column from '../../../lib/Grid/column/Column.js';
import ColumnStore from '../../../lib/Grid/data/ColumnStore.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     : false,
            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 casman.manzano »

ok thx where do i add this statuscolumn class? into the module?


Post by casman.manzano »

also where do i find the

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

as in my lib file for the trial there is no "Grid" folder


Post by saki »

For Angular, you would import from @bryntum/gantt/gant.lite.umd.js so it would look like:

import { Column, ColumnStore } from '@bryntum/gantt/gant.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     : false,
            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);

You would put it in a separate file that you import where this column type is needed.

Our advanced Angular example does just that, take a look at its code please.


Post Reply