Our pure JavaScript Scheduler component


Post by rcon »

Although I can manipulate the class to change the group header height, lets say for smaller than the rowHeight, an empty space is still left between the group header and the first resource row.

Bildschirmfoto 2021-12-07 um 09.57.09.png
Bildschirmfoto 2021-12-07 um 09.57.09.png (20.58 KiB) Viewed 481 times

any workaround for this available?

Regards, Ricardo

Last edited by rcon on Tue Dec 07, 2021 1:47 pm, edited 1 time in total.

Post by alex.l »

Could you please share your solution? Did you try https://bryntum.com/docs/grid/api/Grid/column/Column#config-autoHeight ?

All the best,
Alex


Post by rcon »

Hi Alex,
autoHeight doesn't make it work

here a better printscreen

Bildschirmfoto 2021-12-07 um 12.46.23.png
Bildschirmfoto 2021-12-07 um 12.46.23.png (36.1 KiB) Viewed 473 times

As you can see there is a gap between the group head and the first resource name.

I reduced the group head by simply change the following class

.b-grid-row.b-group-row {
  height: 22px !important;
}

the rowHeight in the appConfig.js is 34

const useSchedulerConfig = () => {
  return {
    visibleDate: {
      date: new Date(),
      block: 'center',
    },
    infiniteScroll: true,
    viewPreset: 'two_hours',
    barMargin: 5,
    //autoHeight : true,
    rowHeight: 34,
    multiEventSelect: true,
    resourceImagePath: 'users/',
    columns: [
      { type: 'resourceCollapse', filterable: false },
      {
        type: 'resourceInfo',
        text: 'Name',
        field: 'name',
        width: 165,
        filterable: false,
        hideable: true,
      },
      {
        type: 'timeAxis',
        renderer() {
          return '<div class="cool-chart"></div>'
        },
      },
    ],
    resources: [],
    events: [],
  }
}

We will have a big number of recources (like 35 or more) so the rows need to stay smaller, and by having the group head the same height like the other rows, we end up loosing necessary height for all the rest.


Post by alex.l »

I used the next configuration. For regular rows I set height using https://bryntum.com/docs/grid/api/Grid/view/GridBase#config-rowHeight property.

For headers I used size property in custom https://bryntum.com/docs/grid/api/Grid/feature/Group#config-renderer
and it works well.

Example:

let grid = new Grid({
    appendTo : 'container',
    rowHeight : 20,
    features : {
        group : {
            field : 'food',
            renderer({ size }) {
                size.height = 80;
		// ....

We will update our docs with the info about group header sizing to make it more clear.
Thank you for the question!

All the best,
Alex


Post by rcon »

It worked great :)
Thanks Alex


Post Reply