Our state of the art Gantt chart


Post by peterlechner »

Hi,

I reviewed this sample for the grid:
https://bryntum.com/examples/grid/columns/

In the code documentation is says:
If the column specifies an unavailable field (through the Custom option in the UI), that field will be added to Model used by Grids store.

Questions:
Does this also apply to the gantt as well? If not, do you have a similar example for the gantt?
How can a display a custom column of a standard type (e.g. 'number') in the "AddNewColumn" column?

I don't want to create a new column type. I want to create a new instance of an existing type and add it to the gantt at runtime. Like in the grid example, but also add it to the AddNewColumn column.

Thanks, Peter


Post by peterlechner »

I have figured out how to add columns dynamically. Following questions:
What is the difference between createColumnsFromModel and createColumnsFromData (which I think is not mentioned in API docs)?
How can I add a new column to the "AddNewColumn".

Thanks, Peter


Post by Maxim Gorkovsky »

Hello.
AddNewColumn column does not work that way. It shows list of registered Gantt columns and allows to put single instance of given type to the panel. Gantt columns are preconfigured with fields used by the TaskModel by default.

What you need is a widget that allows to specify field type, name and column name. In this column snippet I added a container with fields to the toolbar just to show how this could be done:

const gantt = new Gantt({
    tbar : {
        items : {
            newFieldWidget : {
                type  : 'panel',
                items : [
                    {
                        type       : 'textfield',
                        name       : 'fieldName',
                        label      : 'Field name',
                        labelWidth : '10em'
                    },
                    {
                        type       : 'combo',
                        name       : 'fieldType',
                        label      : 'Field type',
                        editable   : false,
                        labelWidth : '10em',
                        store      : [
                            { id : 'boolean', text : 'Boolean' },
                            { id : 'date', text : 'Date' },
                            { id : 'number', text : 'Number' },
                            { id : 'string', text : 'String' }
                        ]
                    },
                    {
                        type       : 'textfield',
                        name       : 'columnName',
                        label      : 'Column name',
                        labelWidth : '10em'
                    },
                    {
                        type : 'button',
                        text : 'Add field',
                        onClick() {
                            const { fieldName, fieldType, columnName } = gantt.widgetMap.newFieldWidget.values;

                            gantt.taskStore.modelClass.addField({
                                name : fieldName,
                                type : fieldType
                            });

                            gantt.columns.add({
                                text  : columnName,
                                // type : convertFieldTypeToColumnType
                                field : fieldName
                            });
                        }
                    }
                ]
            }
        }
    }
});

Post Reply