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.
any workaround for this available?
Regards, Ricardo
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.
any workaround for this available?
Regards, Ricardo
Could you please share your solution? Did you try https://bryntum.com/docs/grid/api/Grid/column/Column#config-autoHeight ?
All the best,
Alex
Hi Alex,
autoHeight doesn't make it work
here a better printscreen
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.
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