# Yahoo! UI Library

### DataTable Widget 2.6.0

Yahoo! UI Library > datatable > YAHOO.widget.ScrollingDataTable

Show Private Show Protected Show Deprecated

## Class YAHOO.widget.ScrollingDataTable - extends YAHOO.widget.DataTable

The ScrollingDataTable class extends the DataTable class to provide functionality for x-scrolling, y-scrolling, and xy-scrolling.

### Constructor

YAHOO.widget.ScrollingDataTable `( elContainer , aColumnDefs , oDataSource , oConfigs )`

Parameters:
  `elContainer <HTMLElement>` Container element for the TABLE.
  `aColumnDefs <Object[]>` Array of object literal Column definitions.
  `oDataSource <YAHOO.util.DataSource>` DataSource instance.
  `oConfigs <object>` (optional) Object literal of configuration values.

### Properties

#### _bScrollbarX `- private Boolean`

True if x-scrollbar is currently visible.

#### _elBdContainer `- private HTMLElement`

Container for scrolling body TABLE element.

#### _elBdThead `- private HTMLElement`

Body THEAD element.

#### _elHdContainer `- private HTMLElement`

Container for fixed header TABLE element.

#### _elHdTable `- private HTMLElement`

Fixed header TABLE element.

#### _elTmpContainer `- private HTMLElement`

Offscreen container to temporarily clone SDT for auto-width calculation.

#### _elTmpTable `- private HTMLElement`

Offscreen TABLE element for auto-width calculation.

#### DataTable.CLASS_BODY `- static final String`

Class name assigned to inner DataTable body container.
Default Value: "yui-dt-bd"

#### DataTable.CLASS_HEADER `- static final String`

Class name assigned to inner DataTable header container.
Default Value: "yui-dt-hd"

#### Properties inherited from YAHOO.widget.DataTable:

`_aDynFunctions, _aSelections, _bInit, _elCaption, _elColgroup, _elContainer, _elMask, _elMsgTbody, _elMsgTd, _elMsgTr, _elTable, _elTbody, _elThead, _elTrTemplate, _nIndex, _nTdCount, _nTrCount, _oAnchorCell, _oAnchorRecord, _oCellEditor, _oChainRender, _oColumnSet, _oDataSource, _oRecordSet, _sFirstTrId, _sId, _sLastTrId, configs`

### Methods

#### _destroyBdTheadEl

`private void _destroyBdTheadEl ( )`
Destroy's the DataTable body THEAD element, if available.

Returns: `void`

#### _destroyContainerEl

`private void _destroyContainerEl ( elContainer )`
Destroy's the DataTable outer and inner container elements, if available.

Parameters:
  `elContainer <HTMLElement>` Reference to the container element.

Returns: `void`

#### _destroyHdTableEl

`private void _destroyHdTableEl ( )`
Destroy's the DataTable head TABLE element, if available.

Returns: `void`

#### _focusEl

`private void _focusEl ( el )`
Sets focus on the given element.

Parameters:
  `el <HTMLElement>` Element.

Returns: `void`

#### _initBdTheadEl

`private HTMLElement _initBdTheadEl ( elTable )`
Initializes body THEAD element.

Parameters:
  `elTable <HTMLElement>` TABLE element into which to create THEAD.

Returns: `HTMLElement`
  Initialized THEAD element.

#### _initBdThEl

`private void _initBdThEl ( elTh , oColumn )`
Populates TH element for the body THEAD element.

Parameters:
  `elTh <HTMLElement>` TH element reference.
  `oColumn <YAHOO.widget.Column>` Column object.

Returns: `void`

#### _initCaptionEl

`private void _initCaptionEl ( sCaption )`
Creates HTML markup CAPTION element.

Parameters:
  `sCaption <String>` Text for caption.

Returns: `void`

#### _initContainerEl

`private void _initContainerEl ( elContainer )`
Initializes the DataTable outer container element and creates inner header and body container elements.

Parameters:
  `elContainer <HTMLElement | String>` HTML DIV element by reference or ID.

Returns: `void`

#### _initDomElements

`private void _initDomElements ( elContainer )`
Initializes DOM elements for a ScrollingDataTable, including creation of two separate TABLE elements.

Parameters:
  `elContainer <HTMLElement | String} HTML DIV element by reference or ID. return {Boolean>` False in case of error, otherwise true

Returns: `void`

#### _initTableEl

`private void _initTableEl ( )`
Initializes ScrollingDataTable TABLE elements into the two inner containers.

Returns: `void`

#### _initTbodyEl

`private void _initTbodyEl ( elTable )`
Initializes ScrollingDataTable TBODY element for data

Parameters:
  `elTable <HTMLElement>` TABLE element into which to create TBODY .

Returns: `void`

#### _initTheadEl

`private void _initTheadEl ( elHdTable , elTable )`
Initializes ScrollingDataTable THEAD elements into the two inner containers.

Parameters:
  `elHdTable <HTMLElement>` (optional) Fixed header TABLE element reference.
  `elTable <HTMLElement>` (optional) TABLE element reference.

Returns: `void`

#### _initThEl

`private void _initThEl ( elTh , oColumn )`
SDT changes ID so as not to duplicate the accessibility TH IDs.

Parameters:
  `elTh <HTMLElement>` TH element reference.
  `oColumn <YAHOO.widget.Column>` Column object.

Returns: `void`

#### _onScroll

`private void _onScroll ( e , oSelf )`
Syncs scrolltop and scrollleft of all TABLEs.

Parameters:
  `e <HTMLEvent>` The scroll event.
  `oSelf <YAHOO.widget.ScrollingDataTable>` ScrollingDataTable instance.

Returns: `void`

#### _onTheadKeydown

`private void _onTheadKeydown ( e , oSelf )`
Handles keydown events on the THEAD element.

Parameters:
  `e <HTMLEvent>` The key event.
  `oSelf <YAHOO.widget.ScrollingDataTable>` ScrollingDataTable instance.

Returns: `void`

#### _retoreScrollPositions

`private void _retoreScrollPositions ( )`
Restores scroll positions to stored value.

Returns: `void`

#### _runRenderChain

`private void _runRenderChain ( )`
Internal wrapper calls run() on render Chain instance.

Returns: `void`

#### _setOverhangValue

`private void _setOverhangValue ( nBorderWidth )`
Sets Column header overhang to given width.

Parameters:
  `nBorderWidth <Number>` Value of new border for overhang.

Returns: `void`

#### _storeScrollPositions

`private void _storeScrollPositions ( )`
Stores scroll positions so they can be restored after a render.

Returns: `void`

#### _syncScroll

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

Returns: `void`

#### _syncScrollOverhang

`private void _syncScrollOverhang ( )`
Adds/removes Column header overhang as necesary.

Returns: `void`

#### _syncScrollX

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

Returns: `void`

#### _syncScrollY

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

Returns: `void`

#### _validateColumnWidth

`private void _validateColumnWidth ( oColumn , elTd )`
Helper function calculates and sets a validated width for a Column in a ScrollingDataTable.

Parameters:
  `oColumn <YAHOO.widget.Column>` Column instance.
  `elTd <HTMLElement>` TD element to validate against.

Returns: `void`

#### disable

`void disable ( )`
Disables ScrollingDataTable UI.

Returns: `void`

#### getBdContainerEl

`HTMLElement getBdContainerEl ( )`
Returns DOM reference to the DataTable's scrolling body container element.

Returns: `HTMLElement`
  Reference to DIV element.

#### getBdTableEl

`HTMLElement getBdTableEl ( )`
Returns DOM reference to the DataTable's scrolling body TABLE element.

Returns: `HTMLElement`
  Reference to TABLE element.

#### getHdContainerEl

`HTMLElement getHdContainerEl ( )`
Returns DOM reference to the DataTable's fixed header container element.

Returns: `HTMLElement`
  Reference to DIV element.

#### getHdTableEl

`HTMLElement getHdTableEl ( )`
Returns DOM reference to the DataTable's fixed header TABLE element.

Returns: `HTMLElement`
  Reference to TABLE element.

#### initAttributes

`private void initAttributes ( oConfigs )`
Implementation of Element's abstract method. Sets up config values.

Parameters:
  `oConfigs <Object>` (Optional) Object literal definition of configuration values.

Returns: `void`

#### insertColumn

`YAHOO.widget.Column insertColumn ( oColumn , index )`
Inserts given Column at the index if given, otherwise at the end. NOTE: You can only add non-nested Columns and top-level parent Columns. You cannot add a nested Column to an existing parent.

Parameters:
  `oColumn <Object | YAHOO.widget.Column>` Object literal Column definition or a Column instance.
  `index <Number>` (optional) New tree index.

Returns: `YAHOO.widget.Column`
  oColumn Inserted Column instance.

#### onColumnChange

`void onColumnChange ( oArgs )`
Handles Column mutations

Parameters:
  `oArgs <Object>` Custom Event data.

Returns: `void`

#### removeColumn

`YAHOO.widget.Column removeColumn ( oColumn )`
Removes given Column. NOTE: You cannot remove nested Columns. You can only remove non-nested Columns, and top-level parent Columns (which will remove all children Columns).

Parameters:
  `oColumn <YAHOO.widget.Column>` Column instance.

Returns: `YAHOO.widget.Column`
  oColumn Removed Column instance.

#### reorderColumn

`void reorderColumn ( oColumn , index )`
Removes given Column and inserts into given tree index. NOTE: You can only reorder non-nested Columns and top-level parent Columns. You cannot reorder a nested Column to an existing parent.

Parameters:
  `oColumn <YAHOO.widget.Column>` Column instance.
  `index <Number>` New tree index.

Returns: `void`

#### setColumnWidth

`void setColumnWidth ( oColumn , nWidth )`
Sets given Column to given pixel width. If new width is less than minWidth width, sets to minWidth. Updates oColumn.width value.

Parameters:
  `oColumn <YAHOO.widget.Column>` Column instance.
  `nWidth <Number>` New width in pixels.

Returns: `void`

#### showTableMessage

`void showTableMessage ( sHTML , sClassName )`
Displays message within secondary TBODY.

Parameters:
  `sHTML <String>` (optional) Value for innerHTMlang.
  `sClassName <String>` (optional) Classname.

Returns: `void`

#### validateColumnWidths

`void validateColumnWidths ( oArg.column )`
For one or all Columns of a ScrollingDataTable, when Column is not hidden, and width is not set, syncs widths of header and body cells and validates that width against minWidth and/or maxAutoWidth as necessary.

Parameters:
  `oArg.column <YAHOO.widget.Column>` (optional) One Column to validate. If null, all Columns' widths are validated.

Returns: `void`

#### Methods inherited from YAHOO.widget.DataTable:

`_clearMinWidth, _clearTrTemplateEl, _createTrEl, _defaultPaginatorContainers, _deleteTrEl, _destroyColgroupEl, _destroyColumnHelpers, _destroyContainerEl, _destroyDraggableColumns, _destroyMsgTbodyEl, _destroyResizeableColumns, _destroyTableEl, _destroyTbodyEl, _destroyTheadEl, _focusEl, _formatTdEl, _getColumnClassnames, _getSelectionAnchor, _getSelectionTrigger, _getTrTemplateEl, _handleCellBlockSelectionByKey, _handleCellBlockSelectionByMouse, _handleCellRangeSelectionByKey, _handleCellRangeSelectionByMouse, _handlePaginatorChange, _handleSingleCellSelectionByKey, _handleSingleCellSelectionByMouse, _handleSingleSelectionByKey, _handleSingleSelectionByMouse, _handleStandardSelectionByKey, _handleStandardSelectionByMouse, _initCaptionEl, _initCellEditing, _initCellEditorEl, _initColgroupEl, _initColumnHelpers, _initColumnSet, _initColumnSort, _initConfigs, _initContainerEl, _initDataSource, _initDomElements, _initDraggableColumns, _initEvents, _initMsgTbodyEl, _initRecordSet, _initResizeableColumns, _initTableEl, _initTbodyEl, _initTheadEl, _initThEl, _insertColgroupColEl, _onDocumentClick, _onDropdownChange, _onEditorBlockEvent, _onEditorBlurEvent, _onEditorCancelEvent, _onEditorKeydownEvent, _onEditorRevertEvent, _onEditorSaveEvent, _onEditorShowEvent, _onEditorUnblockEvent, _onRenderChainEnd, _onTableDblclick, _onTableFocus, _onTableKeypress, _onTableMousedown, _onTableMouseout, _onTableMouseover, _onTableMouseup, _onTbodyClick, _onTbodyFocus, _onTbodyKeydown, _onTheadClick, _onTheadFocus, _onTheadKeydown, _removeColgroupColEl, _reorderColgroupColEl, _repaintGecko, _repaintOpera, _repaintWebkit, _restoreMinWidth, _runRenderChain, _setColumnWidth, _setColumnWidthDynFunction, _setColumnWidthDynStyles, _setFirstRow, _setLastRow, _setRowStripes, _setSelections, _syncColWidths, _unselectAllTdEls, _unselectAllTrEls, _unsetFirstRow, _unsetLastRow, _updatePaginator, _updateTrEl, addRow, addRows, cancelCellEditor, clearTextSelection, DataTable.editCheckbox, DataTable.editDate, DataTable.editDropdown, DataTable.editRadio, DataTable.editTextarea, DataTable.editTextbox, DataTable.formatTheadCell, deleteRow, deleteRows, destroy, destroyCellEditor, disable, doBeforeLoadData, doBeforePaginatorChange, doBeforeShowCellEditor, doBeforeSortColumn, focus, focusTbodyEl, focusTheadEl, formatCell, getAboveTdEl, getBelowTdEl, getBody, getCell, getCellEditor, getColumn, getColumnById, getColumnSet, getColumnSortDir, getContainerEl, getDataSource, getFirstTdEl, getFirstTrEl, getId, getLastSelectedCell, getLastSelectedRecord, getLastTdEl, getLastTrEl, getMsgTbodyEl, getMsgTdEl, getNextTdEl, getNextTrEl, getPreviousTdEl, getPreviousTrEl, getRecord, getRecordIndex, getRecordSet, getRow, getSelectedCells, getSelectedColumns, getSelectedRows, getSelectedTdEls, getSelectedTrEls, getState, getTableEl, getTbodyEl, getTdEl, getTdLinerEl, getTheadEl, getThEl, getThLinerEl, getTrEl, getTrIndex, handleDataReturnPayload, hideColumn, hideTableMessage, highlightCell, highlightColumn, highlightRow, initAttributes, initializeTable, insertColumn, isSelected, onDataReturnAppendRows, onDataReturnInitializeTable, onDataReturnInsertRows, onDataReturnReplaceRows, onDataReturnSetRecords, onDataReturnSetRows, onEditorBlockEvent, onEditorBlurEvent, onEditorUnblockEvent, onEventCancelCellEditor, onEventEditCell, onEventFormatCell, onEventHighlightCell, onEventHighlightColumn, onEventHighlightRow, onEventSaveCellEditor, onEventSelectCell, onEventSelectColumn, onEventSelectRow, onEventShowCellEditor, onEventSortColumn, onEventUnhighlightCell, onEventUnhighlightColumn, onEventUnhighlightRow, onPaginatorChange, onPaginatorChangeRequest, onShow, refreshView, removeColumn, render, renderPaginator, reorderColumn, resetCellEditor, saveCellEditor, select, selectCell, selectColumn, selectRow, setColumnWidth, showCellEditor, showColumn, showTableMessage, sortColumn, toString, undisable, unhighlightCell, unhighlightColumn, unhighlightRow, unselectAllCells, unselectAllRows, unselectCell, unselectColumn, unselectRow, updateCell, updateRow, validateColumnWidths`

### Events

#### beforeCOLOR_COLUMNFILLERChange

`beforeCOLOR_COLUMNFILLERChange ( event )`
Fires before the value for the configuration attribute 'COLOR_COLUMNFILLER' changes. Return false to cancel the attribute change.

Parameters:
  `event <{oldValue: any, newValue: any}>` An object containing the previous attribute value and the new value.

#### beforeHeightChange

`beforeHeightChange ( event )`
Fires before the value for the configuration attribute 'height' changes. Return false to cancel the attribute change.

Parameters:
  `event <{oldValue: any, newValue: any}>` An object containing the previous attribute value and the new value.

#### beforeWidthChange

`beforeWidthChange ( event )`
Fires before the value for the configuration attribute 'width' changes. Return false to cancel the attribute change.

Parameters:
  `event <{oldValue: any, newValue: any}>` An object containing the previous attribute value and the new value.

#### COLOR_COLUMNFILLERChange

`COLOR_COLUMNFILLERChange ( event )`
Fires when the value for the configuration attribute 'COLOR_COLUMNFILLER' changes.

Parameters:
  `event <{oldValue: any, newValue: any}>` An object containing the previous attribute value and the new value.

#### heightChange

`heightChange ( event )`
Fires when the value for the configuration attribute 'height' changes.

Parameters:
  `event <{oldValue: any, newValue: any}>` An object containing the previous attribute value and the new value.

#### tableScrollEvent

`tableScrollEvent ( oArgs.event , oArgs.target )`
Fired when a fixed scrolling DataTable has a scroll.

Parameters:
  `oArgs.event <HTMLEvent>` The event object.
  `oArgs.target <HTMLElement>` The DataTable's CONTAINER element (in IE) or the DataTable's TBODY element (everyone else).

#### widthChange

`widthChange ( event )`
Fires when the value for the configuration attribute 'width' changes.

Parameters:
  `event <{oldValue: any, newValue: any}>` An object containing the previous attribute value and the new value.

#### Events inherited from YAHOO.widget.DataTable:

`beforeCaptionChange, beforeCurrencyOptionsChange, beforeCurrencySymbolChange, beforeDateOptionsChange, beforeDraggableColumnsChange, beforeDynamicDataChange, beforeFormatRowChange, beforeGenerateRequestChange, beforeInitialLoadChange, beforeInitialRequestChange, beforeMSG_EMPTYChange, beforeMSG_ERRORChange, beforeMSG_LOADINGChange, beforeMSG_SORTASCChange, beforeMSG_SORTDESCChange, beforeNumberOptionsChange, beforePaginatorChange, beforeRenderLoopSizeChange, beforeSelectionModeChange, beforeSortedByChange, beforeSummaryChange, buttonClickEvent, captionChange, cellClickEvent, cellDblclickEvent, cellFormatEvent, cellHighlightEvent, cellMousedownEvent, cellMouseoutEvent, cellMouseoverEvent, cellMouseupEvent, cellSelectEvent, cellUnhighlightEvent, cellUnselectEvent, cellUpdateEvent, checkboxClickEvent, columnHideEvent, columnHighlightEvent, columnInsertEvent, columnRemoveEvent, columnReorderEvent, columnResizeEvent, columnSelectEvent, columnSetWidthEvent, columnShowEvent, columnSortEvent, columnUnhighlightEvent, columnUnselectEvent, columnUnsetWidthEvent, currencyOptionsChange, currencySymbolChange, dataReturnEvent, dateOptionsChange, disableEvent, draggableColumnsChange, dropdownChangeEvent, dynamicDataChange, editorBlockEvent, editorBlurEvent, editorCancelEvent, editorKeydownEvent, editorRevertEvent, editorSaveEvent, editorShowEvent, editorUnblockEvent, editorUpdateEvent, formatRowChange, generateRequestChange, headerCellClickEvent, headerCellDblclickEvent, headerCellMousedownEvent, headerCellMouseoutEvent, headerCellMouseoverEvent, headerLabelClickEvent, headerLabelDbllickEvent, headerLabelMousedownEvent, headerLabelMouseoutEvent, headerLabelMouseoverEvent, headerRowClickEvent, headerRowDblclickEvent, headerRowMousedownEvent, headerRowMouseoutEvent, headerRowMouseoverEvent, initEvent, initialLoadChange, initialRequestChange, linkClickEvent, MSG_EMPTYChange, MSG_ERRORChange, MSG_LOADINGChange, MSG_SORTASCChange, MSG_SORTDESCChange, numberOptionsChange, paginatorChange, postRenderEvent, radioClickEvent, renderEvent, renderLoopSizeChange, rowAddEvent, rowClickEvent, rowDblclickEvent, rowDeleteEvent, rowHighlightEvent, rowMousedownEvent, rowMouseoutEvent, rowMouseoverEvent, rowMouseupEvent, rowsAddEvent, rowsDeleteEvent, rowSelectEvent, rowUnhighlightEvent, rowUnselectEvent, rowUpdateEvent, selectionModeChange, sortedByChange summaryChange tableBlurEvent tableClickEvent tableDblclickEvent tableFocusEvent tableKeyEvent tableMousedownEvent tableMouseoutEvent tableMouseoverEvent tableMouseupEvent tableMsgHideEvent tableMsgShowEvent tbodyFocusEvent tbodyKeyEvent theadCellClickEvent theadCellDblclickEvent theadCellMousedownEvent theadCellMouseoutEvent theadCellMouseoverEvent theadCellMouseupEvent theadFocusEvent theadKeyEvent theadLabelClickEvent theadLabelDblclickEvent theadLabelMousedownEvent theadLabelMouseoutEvent theadLabelMouseoverEvent theadLabelMouseupEvent theadRowClickEvent theadRowDblclickEvent theadRowMousedownEvent theadRowMouseoutEvent theadRowMouseoverEvent theadRowMouseupEvent undisableEvent unselectAllCellsEvent unselectAllRowsEvent`

### Configuration Attributes

#### COLOR_COLUMNFILLER `- String`

CSS color value assigned to header filler on scrollable tables.
Default Value: "#F2F2F2"

#### height `- String`

Table body height for scrollable tables, not including headers.

#### width `- String`

Table width for scrollable tables. Note: When setting width and height at runtime, please set height first.

#### Configuration attributes inherited from YAHOO.widget.DataTable:

`caption, currencyOptions, currencySymbol, dateOptions, draggableColumns, dynamicData, formatRow, generateRequest, initialLoad, initialRequest, MSG_EMPTY, MSG_ERROR, MSG_LOADING, MSG_SORTASC, MSG_SORTDESC, numberOptions, paginator, renderLoopSize, selectionMode, sortedBy, summary,`

Copyright © 2008 Yahoo! Inc. All rights reserved.