Premium support for our pure JavaScript UI components


Post by Shinya Umeshita »

I would like to add custom columns for gantt.
But when I see the example source code ( dist\gantt-4.2.6\examples\salesforce\src\lwc\gantt_component ), only prepared column is used.
(Prepared column like the column mentioned on the below document.)
https://www.bryntum.com/docs/gantt/#Gantt/column/AddNewColumn

if there is some example of using custom column, I would like to check it.

Attachments
ganttcolumn.png
ganttcolumn.png (187.26 KiB) Viewed 581 times

Post by mats »

Please look at the 'advanced' demo:

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 Shinya Umeshita »

Thank you mats.

Event if I extends Column class, cannot I create column dymanically?
I would like to change column data dynamically on the screen like scheduler pro. (in scheduler pro columns data is given by array variable.)


Post by alex.l »

Hi Shinya,

To add a new column type, you have to extend a class and register the type.
If you just want to use it, check any of our examples. The file you need to check in lwc is placed at /examples/salesforce/src/lwc/gantt_component/gantt_component.js.

All the best,
Alex


Post Reply