Class DataTableScroll
- extends Plugin.Base
Adds scrolling to DataTable.
Properties
The DIV node that contains all the scrollable elements (a table with a tbody on it)
The DIV node that contains a table with a THEAD in it (which syncs its horizontal scroll with the _bodyContainerNode above)
The contentBox specified for the datatable in datatable-base
The TBODY Message node which resides within the table node created in datatable-base
The table node created in datatable-base
The TBODY node which resides within the table node created in datatable-base
The THEAD node which resides within the table node created in datatable-base
Properties inherited from Base:
Methods
private
void
_attachTbodyTdNode
(
)
Adds the appropriate width to the liner divs of the TD nodes before they are appended to DOM
private
void
_attachTheadThNode
(
)
Adds the approriate width to the liner divs of the TH nodes before they are appended to DOM
private
void
_createBodyContainer
(
)
Creates the body DIV that contains all the data.
private
void
_createHeaderContainer
(
)
Creates the DIV that contains a <table> with all the headers.
private
void
_onScroll
(
)
Ensures that scrolling is synced across the two tables
private
void
_removeCaptionNode
(
)
Remove the caption created in base. Scrolling datatables dont support captions.
private
void
_setContentBoxDimensions
(
)
Sets an auto width on the content box if it doesn't exist or if its a y-datatable.
private
void
_setOverhangValue
(
nBorderWidth
)
Sets Column header overhang to given width.
Taken from YUI2 ScrollingDataTable.js with minor modifications
- Parameters:
-
nBorderWidth
<Number>
Value of new border for overhang.
private
void
_setStylesForTbody
(
)
Creates styles for the TBODY based on what type of table it is.
private
void
_setStylesForThead
(
)
Creates styles for the THEAD based on what type of datatable it is.
private
void
_setUpNodes
(
)
Set up methods to fire after host methods execute
private
void
_setUpParentMessageNode
(
)
Stores the main <tbody> message node provided by the host as a private property
private
void
_setUpParentTableNode
(
)
Stores the main <table> node provided by the host as a private property
private
void
_setUpParentTbodyNode
(
)
Stores the main <tbody> node provided by the host as a private property
private
void
_setUpParentTheadNode
(
)
Stores the main <thead> node provided by the host as a private property
private
void
_syncScroll
(
)
Syncs padding around scrollable tables, including Column header right-padding
and container width and height.
private
void
_syncScrollOverhang
(
)
Adds/removes Column header overhang as necesary.
Taken from YUI2 ScrollingDataTable.js
private
void
_syncScrollX
(
)
Snaps container height for x-scrolling tables in IE. Syncs message TBODY width.
Taken from YUI2 ScrollingDataTable.js
private
void
_syncScrollY
(
)
Snaps container width for y-scrolling tables.
private
void
_syncWidths
(
)
Adjusts the width of the TH and the TDs to make sure that the two are in sync
Implementation Details:
Compares the width of the TH liner div to the the width of the TD node. The TD liner width
is not actually used because the TD often stretches past the liner if the parent DIV is very
large. Measuring the TD width is more accurate.
Instead of measuring via .get('width'), 'clientWidth' is used, as it returns a number, whereas
'width' returns a string, In IE6, 'clientWidth' is not supported, so 'offsetWidth' is used.
'offsetWidth' is not as accurate on Chrome,FF as 'clientWidth' - thus the need for the fork.
void
renderUI
(
)
Primary rendering method that takes the datatable rendered in
the host, and splits it up into two separate <divs> each containing two
separate tables (one containing the head and one containing the body).
This method fires after renderUI is called on datatable-base.
void
syncUI
(
)
Post rendering method that is responsible for creating a column
filler, and performing width and scroll synchronization between the <th>
elements and the <td> elements.
This method fires after syncUI is called on datatable-base
Methods inherited from EventTarget:
_getType,
_monitor,
_parseType,
addTarget,
after,
before,
bubble,
detach,
detachAll,
fire,
getEvent,
getTargets,
on,
once,
parseType,
publish,
removeTarget,
subscribe,
unsubscribe,
unsubscribeAll
Methods inherited from Attribute:
_addAttrs,
_addLazyAttr,
_defAttrChangeFn,
_fireAttrChange,
_getAttr,
_getAttrCfg,
_getAttrInitVal,
_getAttrs,
_getStateVal,
_isLazyAttr,
_normAttrVals,
_protectAttrs,
_set,
_setAttr,
_setAttrs,
_setAttrVal,
_setStateVal,
addAttr,
addAttrs,
attrAdded,
get,
getAttrs,
modifyAttr,
removeAttr,
reset,
set,
setAttrs
Methods inherited from Base:
_aggregateAttrs,
_defDestroyFn,
_defInitFn,
_destroyHierarchy,
_filterAttrCfs,
_getAttrCfgs,
_getClasses,
_initHierarchy,
_initHierarchyData,
_preInitEventCfg,
destroy,
init,
toString
Events
COLOR_COLUMNFILLERChange
(
event
)
Fires when the value for the configuration attribute 'COLOR_COLUMNFILLER' is changed. You can listen for the event using the
on method if you wish to be notified before the attribute's value has changed, or using the
after method if you wish to be notified after the attribute's value has changed.
- Parameters:
-
event
<Event.Facade>
An Event Facade object with the following attribute specific properties added: - prevVal
- The value of the attribute, prior to it being set
- newVal
- The value the attribute is to be set to
- attrName
- The name of the attribute being set
- subAttrName
- If setting a property within the attribute's value, the name of the sub-attribute property being set
heightChange
(
event
)
Fires when the value for the configuration attribute 'height' is changed. You can listen for the event using the
on method if you wish to be notified before the attribute's value has changed, or using the
after method if you wish to be notified after the attribute's value has changed.
- Parameters:
-
event
<Event.Facade>
An Event Facade object with the following attribute specific properties added: - prevVal
- The value of the attribute, prior to it being set
- newVal
- The value the attribute is to be set to
- attrName
- The name of the attribute being set
- subAttrName
- If setting a property within the attribute's value, the name of the sub-attribute property being set
scrollChange
(
event
)
Fires when the value for the configuration attribute 'scroll' is changed. You can listen for the event using the
on method if you wish to be notified before the attribute's value has changed, or using the
after method if you wish to be notified after the attribute's value has changed.
- Parameters:
-
event
<Event.Facade>
An Event Facade object with the following attribute specific properties added: - prevVal
- The value of the attribute, prior to it being set
- newVal
- The value the attribute is to be set to
- attrName
- The name of the attribute being set
- subAttrName
- If setting a property within the attribute's value, the name of the sub-attribute property being set
widthChange
(
event
)
Fires when the value for the configuration attribute 'width' is changed. You can listen for the event using the
on method if you wish to be notified before the attribute's value has changed, or using the
after method if you wish to be notified after the attribute's value has changed.
- Parameters:
-
event
<Event.Facade>
An Event Facade object with the following attribute specific properties added: - prevVal
- The value of the attribute, prior to it being set
- newVal
- The value the attribute is to be set to
- attrName
- The name of the attribute being set
- subAttrName
- If setting a property within the attribute's value, the name of the sub-attribute property being set
Events inherited from Base:
Configuration Attributes
The hexadecimal colour value to set on the top-right of the table if a scrollbar exists.
The height for the table. Set to a string (ex: "200px", "20em") if you want the table to scroll in the y-direction.
scroll
- private string
The scrolling direction for the table.
The width for the table. Set to a string (ex: "200px", "20em") if you want the table to scroll in the x direction.
Configuration attributes inherited from Base: