Our pure JavaScript Scheduler component


Post by JohnMousley »

Hi, is it possible to hide specific resource headers, for example on the attached image can I hide Group 1 and Group 2 headers but still show the resources under them (Batman, Wolverine, and Ranmore and Cupcake)?

Is it possible to resize specific group headers to make them smaller than the normal resource rows?

Is it possible to make the border under specific group headers different thickness and colours?

Attachments
Scheduler_Resource_Groups.png
Scheduler_Resource_Groups.png (35.06 KiB) Viewed 383 times

Post by mats »

Hi, is it possible to hide specific resource headers, for example on the attached image can I hide Group 1 and Group 2 headers but still show the resources under them (Batman, Wolverine, and Ranmore and Cupcake)?

No, sorry

Is it possible to resize specific group headers to make them smaller than the normal resource rows?

See the 'renderer' config and its height param on the Group feature:

/**
             * A function which produces the HTML for a group header.
             * The function is called in the context of this Group feature object.
             * Default group renderer displays the `groupRowFor` and `count`.
             *
             * @config {Function}
             * @property {String} groupRowFor The value of the `field` for the group.
             * @property {Core.data.Model} record The group record representing the group.
             * @property {Object} record.meta Meta data with additional info about the grouping.
             * @property {Array} record.groupChildren The group child records.
             * @property {Number} count Number of records in the group.
             * @property {Grid.column.Column} column The column the renderer runs for.
             * @property {Boolean} isFirstColumn True, if `column` is the first column.
             * If `RowNumberColumn` is the real first column, it's not taken into account.
             * @property {Grid.column.Column} [groupColumn] The column under which the `field` is shown.
             * @property {Object} size Sizing information for the group header row, only `height` is relevant.
             * @property {Number} size.height The height of the row, set this if you want a custom height for the group header row
             * That is UI part, so do not rely on its existence.
             * @default
             */
            renderer : null

Is it possible to make the border under specific group headers different thickness and colours?

Sure, you can solve this in one of your column renderers. https://bryntum.com/docs/grid/#Grid/column/Column#config-renderer simply add a CSS class to the row like so:

 {
            text          : 'Food (custom)',
            field         : 'food',
            flex          : 1,
            groupRenderer : ({ groupRowFor, row }) => {
                row.addCls('foo');

            return groupRowFor;
        }
    },

Post by JohnMousley »

Hi, I've managed to get the results I wanted with the following changes:

Updated the group header renderer so it assigned the CSS 'groupHeader' to the group header row and set the height to desired size:

group: {
	field: 'type',
	ascending: false,
	renderer: ({ isFirstColumn, count, groupRowFor, record, row }) => {
		row.addCls('groupHeader');
		record.rowHeight = 30;
		return isFirstColumn ? `${groupRowFor} (${count})` : '';
               }
},

Added the following CSS to control the font size, row height and add a bottom border to the group header:

.groupHeader{
    font-size: smaller;
    max-height: 30px;
    border-bottom: 3px solid black !important;
}

Updated scheduler:

Attachments
Scheduler_Resource_Groups_Small2.png
Scheduler_Resource_Groups_Small2.png (30.77 KiB) Viewed 367 times
Last edited by JohnMousley on Thu May 06, 2021 11:01 am, edited 1 time in total.

Post by mats »

Good stuff, thanks for sharing! :)


Post Reply