Header
The Grid header, which contains simple columns but also allows grouped columns. One instance is created and used per SubGrid automatically, you should not need to instantiate this class manually. See Column for information about column configuration.
Header
//<code-header>
fiddle.title = 'Header';
//</code-header>
const grid = new Grid({
appendTo : targetElement,
height : 160,
data : [],
columns : [
{ field : 'name', text : 'Simple column', flex : 1 },
{
field : 'city',
text : 'Grouped columns',
align : 'center',
children : [
{ width : 170, text : 'Sub column 1' },
{ width : 170, text : 'Sub column 2' }
]
},
{ type : 'number', field : 'score', text : 'Right aligned column', align : 'right', flex : 1 }
]
});Configs
74
Configs
74Common
listenersEvents
DOM
adoptWidget
appendToWidget
contentWidget
datasetWidget
htmlWidget
idWidget
insertBeforeWidget
insertFirstWidget
tagWidget
titleWidget
Float & align
alignWidget
anchorWidget
centeredWidget
constrainToWidget
draggableWidget
floatingWidget
hideAnimationWidget
maximizeOnMobileWidget
positionedWidget
scrollActionWidget
showAnimationWidget
xWidget
yWidget
Layout
alignSelfWidget
dockWidget
flexWidget
heightWidget
hiddenWidget
marginWidget
maxHeightWidget
maxWidthWidget
minHeightWidget
minWidthWidget
textAlignWidget
weightWidget
widthWidget
Misc
bubbleEventsEvents
dataFieldWidget
defaultBindPropertyWidget
disabledWidget
elementAttributesWidget
ignoreParentReadOnlyWidget
localeClassLocalizable
localizableLocalizable
localizablePropertiesLocalizable
maskDefaultsWidget
maskedWidget
monitorResizeWidget
ownerWidget
preventTooltipOnTouchWidget
readOnlyWidget
refWidget
rippleWidget
rootElementWidget
showTooltipWhenDisabledWidget
tabWidget
tooltipWidget
Scrolling
scrollableWidget
Properties
66
Properties
66Class hierarchy
Identifies an object as an instance of Header class, or subclass thereof.
Identifies an object as an instance of Header class, or subclass thereof.
isBarBar
isDelayableDelayable
isEventsEvents
isKeyMapKeyMap
isLocalizableLocalizable
isRTLRTL
isWidgetWidget
CSS
clsWidget
DOM
appendToWidget
contentWidget
contentElementWidget
datasetWidget
elementWidget
focusableElementWidget
focusElementWidget
htmlWidget
idWidget
insertBeforeWidget
insertFirstWidget
overflowElementWidget
styleWidget
Layout
alignSelfWidget
flexWidget
heightWidget
marginWidget
maxHeightWidget
maxWidthWidget
minHeightWidget
minWidthWidget
scrollableWidget
widthWidget
Misc
callOnFunctionsEvents
cellInfoWidget
disabledWidget
localeHelperLocalizable
localeManagerLocalizable
readOnlyWidget
refWidget
tabWidget
tooltipWidget
Functions
59
Functions
59Other
Get the header cell element for the specified column.
| Parameter | Type | Description |
|---|---|---|
columnId | String | Column id |
Returns: HTMLElement -
Header cell element
addListenerEvents
announceAriaLiveWidget
composeWidget
createOnFrameDelayable
disableWidget
enableWidget
exitFullscreenWidget
focusWidget
hasListenerEvents
maskWidget
onEvents
recomposeWidget
relayAllEvents
removeAllListenersEvents
removeListenerEvents
requestFullscreenWidget
resumeEventsEvents
revertFocusWidget
suspendEventsEvents
triggerEvents
unEvents
unmaskWidget
Configuration
Events
detachListenersBase
Misc
animatePropertyBase
callbackBase
downloadTestCaseBase
resolveCallbackBase
updateLocalizationLocalizable
Widget hierarchy
closestWidget
containsWidget
eachAncestorWidget
eachWidgetWidget
ownsWidget
queryWidget
queryAllWidget
upWidget
Events
14
Events
14beforeDestroyEvents
beforeHideWidget
beforeShowWidget
catchAllEvents
destroyEvents
elementCreatedWidget
focusInWidget
focusOutWidget
hideWidget
paintWidget
readOnlyWidget
recomposeWidget
resizeWidget
showWidget
Event handlers
14
Event handlers
14onBeforeDestroyEvents
onBeforeHideWidget
onBeforeShowWidget
onCatchAllEvents
onDestroyEvents
onElementCreatedWidget
onFocusInWidget
onFocusOutWidget
onHideWidget
onPaintWidget
onReadOnlyWidget
onRecomposeWidget
onResizeWidget
onShowWidget
Typedefs
6
Typedefs
6AlignSpecWidget
BryntumListenerConfigEvents
CellWidgetContextWidget
ColorWidget
DelayableConfigDelayable
KeyMapConfigKeyMap
CSS variables
38
CSS variables
38| Name | Description |
|---|---|
--b-grid-header-font-size | Grid header font size |
--b-grid-header-font-weight | Grid header font weight |
--b-grid-header-padding | Grid header padding. By default uses grid cells inline padding value (for both block & inline) |
--b-grid-header-text-transform | Grid header text transform |
--b-grid-header-text-align | Grid header text align |
--b-grid-header-gap | Grid header inner gap |
--b-grid-header-icon-font-size | Grid header icon font size |
--b-grid-header-border-width | Grid header border width (for header "cells"). By default same as cell border width |
--b-grid-header-container-border-width | Grid header container border width (the entire header) |
--b-grid-header-zindex | Grid header z-index |
--b-grid-header-icon-transition-duration | Grid header icon transition duration (for example when fading icons in/out on hover) |
--b-grid-header-background | Grid header background color |
--b-grid-header-box-shadow | Grid header box-shadow |
--b-grid-header-color | Grid header text color |
--b-grid-header-icon-color | Grid header icon color |
--b-grid-header-border-color | Grid header border color |
| Hovered | |
--b-grid-header-hover-color | Grid header text color when hovered |
--b-grid-header-hover-background | Background color for the header when hovered |
Inherited
Widget20