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.

Useful configs and functions

Member	Description
headerRenderer	Custom header renderer function
showAvatars	Show resource images in the header
fillWidth	Auto-resize columns to fill available width
fitWidth	Auto-resize columns to fit all resources
columnWidth	Width for each resource column

Configs

Configs are options you supply in a configuration object when creating an instance of this class

columnWidth : Number

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.

Has a corresponding runtime columnWidth property.
fillWidth : Booleantrue

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.

Has a corresponding runtime fillWidth property.
fitWidth : Booleanfalse

Automatically resize resource columns to always fit available width.

This is ignored if any resources are loaded with columnWidth.

Has a corresponding runtime fitWidth property.
headerRenderer : Function
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.

You should never modify any records inside this method.

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>
    `
  }
});
```
When using `headerRenderer` no default internal markup is applied to the resource header cell, `iconCls` and imageUrl or image will have no effect unless you supply custom markup for them.
Parameters
- context : Object
  
  Renderer context data
- resourceRecord : ResourceModel
  
  Resource whose header is being rendered
- elementConfig : DomConfig
  
  A config object used to create the element for the resource
Returns

String
:

The raw HTML string to render into the header. Remember to HTML encode your content!
resourceStore : ResourceStore

private

Resource store used to render resource headers. Assigned from Scheduler.
showAvatars : Booleantrue

Set to false to render just the resource name, true to render an avatar (or initials if no image exists)

Properties

Properties are getters/setters or publicly accessible variables on this class

isResourceHeader : Booleantrue

READONLY

static

ADVANCED

Identifies an object as an instance of ResourceHeader class, or subclass thereof.

columnWidth : Number

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.

Has a corresponding columnWidth config.
fillWidth : Boolean

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.

Has a corresponding fillWidth config.
firstResource : Number

private

READONLY

An index of the first visible resource in vertical mode
fitWidth : Boolean

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.

Has a corresponding fitWidth config.
lastResource : Number

private

READONLY

An index of the last visible resource in vertical mode
isResourceHeader : Booleantrue

READONLY

ADVANCED

Identifies an object as an instance of ResourceHeader class, or subclass thereof.

Functions

Functions are methods available for calling on the class

refresh( )

Refreshes the visible headers

CSS variables

CSS variables that can be set to adjust appearance

Name	Description
--b-resource-header-avatar-background-color	Resource header avatar background color (vertical mode)
--b-resource-header-avatar-size	Resource header avatar size (vertical mode)
--b-resource-header-gap	Resource header inner gap (vertical mode)

Source path

Scheduler/view/ResourceHeader.js

ResourceHeader

Useful configs and functions

See also

Configs

Parameters

Returns

Properties

Functions

CSS variables

Source path

Inheritance tree3

Mixins5

Contents