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
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
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);
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.