ResourceHeader
Header widget that renders resource column headers and acts as the interaction point for resource columns in vertical mode. Note that it uses virtual rendering and element reusage to gain performance, only headers in view are available in DOM. Because of this you should avoid direct element manipulation, any such changes can be discarded at any time.
By default, it displays resources name and also applies its iconCls if any, like this:
<i class="iconCls">name</i>
If Scheduler is configured with a resourceImagePath the header will render miniatures for the resources, using imageUrl or image with fallback to name + resourceImageExtension for unset values.
The contents and styling of the resource cells in the header can be customized using headerRenderer:
new Scheduler({
mode : 'vertical',
resourceColumns : {
headerRenderer : ({ resourceRecord }) => `Hello ${resourceRecord.name}`
}
}
The width of the resource columns is determined by the columnWidth config.
Configs
79
Configs
79Common
Other
Width for each resource column.
This is used for resources which are not are loaded with a columnWidth.
This config may be ignored if resources do not fill the view and fillWidth is set to true.
Automatically resize resource columns to fill available width. Set to false to always respect the
configured columnWidth.
This is ignored if any resources are loaded with columnWidth.
Automatically resize resource columns to always fit available width.
This is ignored if any resources are loaded with columnWidth.
Custom header renderer function. Can be used to manipulate the element config used to create the element for the header:
new Scheduler({
resourceColumns : {
headerRenderer({ elementConfig, resourceRecord }) {
elementConfig.dataset.myExtraData = 'extra';
elementConfig.style.fontWeight = 'bold';
}
}
});
See DomConfig for more information.
Or as a template by returning HTML from the function:
new Scheduler({
resourceColumns : {
headerRenderer : ({ resourceRecord }) => `
<div class="my-custom-template">
${resourceRecord.firstName} {resourceRecord.surname}
</div>
`
}
});
| Parameter | Type | Description |
|---|---|---|
params | Object | Object containing the params below |
params.resourceRecord | ResourceModel | Resource whose header is being rendered |
params.elementConfig | DomConfig | A config object used to create the element for the resource |
The raw HTML string to render into the header. Remember to HTML encode your content!
Set to false to render just the resource name, true to render an avatar (or initials if no image exists)
DOM
Float & align
Layout
Misc
Scrolling
Properties
68
Properties
68Class hierarchy
Other
Width for each resource column.
This is used for resources which are not are loaded with a columnWidth.
This config may be ignored if resources do not fill the view and fillWidth is set to true.
Assign to toggle resource columns *fill mode. true means they will stretch (grow) to fill viewport, false
that they will respect their configured columnWidth.
This is ignored if any resources are loaded with columnWidth.
Assign to toggle resource columns *fit mode. true means they will grow or shrink to always fit viewport,
false that they will respect their configured columnWidth.
This is ignored if any resources are loaded with columnWidth.
CSS
DOM
Layout
Misc
Functions
59
Functions
59Other
Refreshes the visible headers
Configuration
Events
Misc
Widget hierarchy
Events
14
Events
14Event handlers
14
Event handlers
14Typedefs
6
Typedefs
6CSS variables
23
CSS variables
23| Name | Description |
|---|---|
--b-resource-header-avatar-size | Resource header avatar size (vertical mode) |
--b-resource-header-gap | Resource header inner gap (vertical mode) |
--b-resource-header-avatar-background-color | Resource header avatar background color (vertical mode) |