How to achieve column rendering

[nick.savenko]

Guys, I need to implement something like this (check the pic)
Idea that each resource will have to complete sort of inductions)
I am looking for help on general implementation. Let's say which methods to use when I render Header Resource, or resource column and also is it possible to achieve this in the end?

30-11-2018 3-13-23 PM.png (283.92 KiB) Viewed 3465 times

[johan.isaksson]

Hi,

I would first try to:

1) Add a column for each of the labels you have there
2) Add a custom css class to each (https://bryntum.com/docs/scheduler/#Gri ... config-cls)
3) Style using css to match your look

You probably have to specify a small minWidth on the columns also, the default is 60px.

If that approach does not work you could also try using headerRenderer to put custom markup into the headers (https://bryntum.com/docs/scheduler/#Gri ... erRenderer)

[nick.savenko]

Hi Johan
Ok we are almost achieved what we need, however I got stuck with adding columns dynamically.
Is there any any to add more columns dynamically on demand?

Thanks
Nick

[pmiklashevich]

Columns is a store, so you can add/remove data and it will be reflected on the screen. We have a demo in Grid, but same will work in Scheduler https://www.bryntum.com/examples/grid/columns/

[nick.savenko]

Ok I can add column, but its nor rendering:

                const column = {
                  renderer: function ({cellElement, record}) {
                    if (record.data.inductions && record.data.inductions[induction.name]) {
                      (cellElement as HTMLElement).classList.add('completed');
                    }
                  },
                  headerRenderer: function (rendererData) {
                    rendererData.headerElement.style.backgroundColor = induction.color;
                    rendererData.headerElement.innerHTML = induction.name;
                    rendererData.headerElement.setAttribute('data-induction-id', induction.id);
                  },
                  cls: 'induction-heading',
                  cellCls: 'induction-cell',
                  sortable: false,
                  resizable: false,
                  width: 20,
                  minWidth: 20,
                  text: induction.name
                };
                this.schedule.columns.add(column);

If I use code above, "headerRenderer" is never get called. However, renderer is called

[nick.savenko]

I have also made a sample for you to check
https://ufile.io/9u15n

Its an Angular 7 app.
npm install
ng serve

I can see its adding column inside context menu, but doesn't display it on the scheduler

[pmiklashevich]

Since scheduler consists of two grids (locked and normal) it requires to specify the region when you add columns, so the columnStore knows where should it place new column. Please add "region : 'locked'" to the column definition.

scheduler.columns.add({text : 'test', region : 'locked'})

I'll update docs to make it more clear.

[nick.savenko]

Awesome!
Works well!