Our state of the art Gantt chart


Post by johanbrodin »

Hi,

We want to add a user column and are following below example adding a separate file and then importing it in the gantt.config file. However there is an exception "Error: Column type 'priority' not registered" in gantt.module.js.

I would guess that for angular you add a column in he same way as extending taskModelClass. But we fail to find both something to put into the ganttConfig as well as the html gantt widget (data_inline example)

https://bryntum.com/products/gantt/docs/api/Gantt/column/AddNewColumn

//dedicated Column.js file
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 get type() {
        return 'priority';
    }

// indicates that the column should be present in "Add New..." column
static get isGanttColumn() {
    return true;
}

static get defaults() {
    return {
        // the column is mapped to "priority" field of the Task model
        field : 'priority',
        // the column title
        text  : 'priority'
    };
}
}

// register new column
ColumnStore.registerColumnType(TaskPriorityColumn);
//adding the column to the config
   const ganttConfig = {
      project: { 
      },

  infiniteScroll : true,

  columns: [
    { type: 'wbs' },
    { type: 'name' },
    { type: 'priority' },
...
  ],

/Johan


Post by marcio »

Hey Johan,

I tried to import just as you shared in our Angular demo, and it worked just fine.

import { Column, ColumnStore } from "@bryntum/gantt";

// New column class to display task priority
export default class TaskPriorityColumn extends Column {
    // unique alias of the column
     static override get type() {
        return 'priority';
    }

// indicates that the column should be present in "Add New..." column
static get isGanttColumn() {
    return true;
}

static override get defaults() {
    return {
    // the column is mapped to "priority" field of the Task model
        field : 'priority',
        // the column title
        text  : 'priority'
    };
}
}

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

Perhaps importing from Gantt instead of Grid would do the trick??

Best regards,
Márcio


Post by johanbrodin »

Hi,

Thank you for testing it out. We have continued on our end as well and found the problem which is a bit of magic. Adding it below if others have the same issue.


In the gantt.config file

//This works
import '../lib/TaskPriorityColumn.js';

//This does not work  (we are not using TaskPriorityColumn)
import TaskPriorityColumn from '../lib/TaskPriorityColumn.js';

/Johan


Post by mats »

Thanks for sharing the solution!


Post Reply