# Yahoo! UI Library

### datatable 3.3.0

Yahoo! UI Library > datatable > DataTableScroll
Search:
Filters Show Private Show Protected Show Deprecated

## Class DataTableScroll - extends Plugin.Base

Adds scrolling to DataTable.

### Properties

#### _bodyContainerNode - `private Y.Node`

The DIV node that contains all the scrollable elements (a table with a tbody on it)

#### _headerContainerNode - `private Y.Node`

The DIV node that contains a table with a THEAD in it (which syncs its horizontal scroll with the _bodyContainerNode above)

#### _parentContainer - `private Y.Node`

The contentBox specified for the datatable in datatable-base

#### _parentMsgNode - `private Y.Node`

The TBODY Message node which resides within the table node created in datatable-base

#### _parentTableNode - `private Y.Node`

The table node created in datatable-base

#### _parentTbodyNode - `private Y.Node`

The TBODY node which resides within the table node created in datatable-base

#### _parentTheadNode - `private Y.Node`

The THEAD node which resides within the table node created in datatable-base

#### Properties inherited from Plugin.Host:

`PluginHost`

#### Properties inherited from Attribute:

``

#### Properties inherited from Base:

`name`

#### Properties inherited from Plugin.Base:

`_handles`

### Methods

#### _attachTbodyTdNode

`private void _attachTbodyTdNode ( )`
Adds the appropriate width to the liner divs of the TD nodes before they are appended to DOM

#### _attachTheadThNode

`private void _attachTheadThNode ( )`
Adds the approriate width to the liner divs of the TH nodes before they are appended to DOM

#### _createBodyContainer

`private void _createBodyContainer ( )`
Creates the body DIV that contains all the data.

#### _createHeaderContainer

`private void _createHeaderContainer ( )`
Creates the DIV that contains a <table> with all the headers.

#### _onScroll

`private void _onScroll ( )`
Ensures that scrolling is synced across the two tables

#### _removeCaptionNode

`private void _removeCaptionNode ( )`
Remove the caption created in base. Scrolling datatables dont support captions.

#### _setContentBoxDimensions

`private void _setContentBoxDimensions ( )`
Sets an auto width on the content box if it doesn't exist or if its a y-datatable.

#### _setOverhangValue

`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.

#### _setStylesForTbody

`private void _setStylesForTbody ( )`
Creates styles for the TBODY based on what type of table it is.

#### _setStylesForThead

`private void _setStylesForThead ( )`
Creates styles for the THEAD based on what type of datatable it is.

#### _setUpNodes

`private void _setUpNodes ( )`
Set up methods to fire after host methods execute

#### _setUpParentMessageNode

`private void _setUpParentMessageNode ( )`
Stores the main <tbody> message node provided by the host as a private property

#### _setUpParentTableNode

`private void _setUpParentTableNode ( )`
Stores the main <table> node provided by the host as a private property

#### _setUpParentTbodyNode

`private void _setUpParentTbodyNode ( )`
Stores the main <tbody> node provided by the host as a private property

#### _setUpParentTheadNode

`private void _setUpParentTheadNode ( )`
Stores the main <thead> node provided by the host as a private property

#### _syncScroll

`private void _syncScroll ( )`
Syncs padding around scrollable tables, including Column header right-padding and container width and height.

#### _syncScrollOverhang

`private void _syncScrollOverhang ( )`
Adds/removes Column header overhang as necesary. Taken from YUI2 ScrollingDataTable.js

#### _syncScrollX

`private void _syncScrollX ( )`
Snaps container height for x-scrolling tables in IE. Syncs message TBODY width. Taken from YUI2 ScrollingDataTable.js

#### _syncScrollY

`private void _syncScrollY ( )`
Snaps container width for y-scrolling tables.

#### _syncWidths

`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.

#### renderUI

`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.

#### syncUI

`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 Plugin.Host:

`_destroyPlugins, _initPlugins, hasPlugin, plug, unplug`

#### Methods inherited from Base:

`_aggregateAttrs, _defDestroyFn, _defInitFn, _destroyHierarchy, _filterAttrCfs, _getAttrCfgs, _getClasses, _initHierarchy, _initHierarchyData, _preInitEventCfg, destroy, init, toString`

#### Methods inherited from Plugin.Base:

`afterHostEvent, afterHostMethod, beforeHostMethod, destructor, doAfter, doBefore, initializer, onHostEvent`

### Events

#### COLOR_COLUMNFILLERChange

`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

`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

`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

`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:

`destroy, destroyedChange, init, initializedChange,`

#### Events inherited from Plugin.Base:

`hostChange,`

### Configuration Attributes

#### COLOR_COLUMNFILLER `- string`

The hexadecimal colour value to set on the top-right of the table if a scrollbar exists.

#### height `- string`

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.

#### width `- string`

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:

`destroyed initialized`

#### Configuration attributes inherited from Plugin.Base:

`host`

Copyright © 2011 Yahoo! Inc. All rights reserved.