[ANGULAR] How to add column to gantt by ColumnStore?

[striker]

Hello.
How to add column programatically?

Version: Gantt Trial 4.0.8
Angular version: 9.1.9
Without wrapper.

I have following code:

    const ganttInstance = new Gantt(<GanttConfig>{
      columns: new ColumnStore(<ColumnStoreConfig> {
        data: <Column[]> [
          new Column(<ColumnConfig> {
            field: 'name',
            text: 'Task name'
          })
        ]
      }),
      // ...
 

And I want to set task name in this column.

Errors after rendering page:

 TypeError: Cannot read property 'on' of undefined
    at _0x5eabe5._0x3e1d5f (gantt.umd.js:10)
    at new _0x2f8ef5 (gantt.umd.js:10)
    at _0x5eabe5._0x5a9a13 (gantt.umd.js:10)
    at new _0x293c51 (gantt.umd.js:10)
    at _0x5eabe5._0x31b921 (gantt.umd.js:10)
    at new _0x1bf659 (gantt.umd.js:10)
    at _0x5eabe5._0x550fac (gantt.umd.js:10)
    at new _0x2b166c (gantt.umd.js:10)
    at _0x5eabe5._0x1ad991 (gantt.umd.js:10)
    at new _0x3e8c0b (gantt.umd.js:10)

&

Error: Uncaught (in promise): TypeError: Cannot read property 'count' of undefined
TypeError: Cannot read property 'count' of undefined
    at _0x191dd3._0x249e4d (gantt.umd.js:10)
    at _0x191dd3._0x29c849 (gantt.umd.js:10)
    at _0x3435d8._0x1426cf (gantt.umd.js:10)
    at _0x3435d8._0x5bfd3c (gantt.umd.js:10)
    at _0x87e2ec._0x3391a0 (gantt.umd.js:10)
    at _0x53135b._0x2f497c (gantt.umd.js:10)
    at _0x109abb (gantt.umd.js:10)
    at Generator._0x5a0990 [as _invoke] (gantt.umd.js:10)
    at Generator.next (gantt.umd.js:10)
    at _0x81339a (gantt.umd.js:10)
    at resolvePromise (zone-evergreen.js:798)
    at zone-evergreen.js:705
    at zone-evergreen.js:721
    at ZoneDelegate.invoke (zone-evergreen.js:364)
    at Object.onInvoke (core.js:41654)
    at ZoneDelegate.invoke (zone-evergreen.js:363)
    at Zone.run (zone-evergreen.js:123)
    at zone-evergreen.js:857
    at ZoneDelegate.invokeTask (zone-evergreen.js:399)
    at Object.onInvokeTask (core.js:41632)
    

[mats]

Please see docs: https://bryntum.com/docs/gantt/#Grid/data/ColumnStore

gantt.columns.add({ text : 'new column' })

[striker]

It's working. Thanks. But how to do it on initializing instance with strongly typed models like <ThisModel>?

  const ganttInstance = new Gantt(<GanttConfig>{
      columns: new ColumnStore(<ColumnStoreConfig> {
        data: <Column[]> [
          new Column(<ColumnConfig> {
            field: 'name',
            text: 'Task name'
          })
        ]
      }),

It's not working. But after creating gantt instance and add by

ganttInstance.columns.add(....

it's working.

[alex.l]

Hi striker,

data property of a ColumnStore is just Object[] typed. I am afraid you have to use an array of objects there.

[striker]

Thanks for reply.
I thought ColumnStore in data have ColumnModel. ResourceStore in data have ResourceModel, TaskStore in data have TaskModel etc,
but it's not looking like this in all cases.

I must use raw json to implement what I want, thanks.