Yahoo! Developer Network Home - Help

YDN Site Search

# YUI Library Examples: DataTable Control (beta): Cell Selection

# DataTable Control (beta): Cell Selection

These examples demonstrate "cellblock", "cellrange", and "singlecell" selection modes.

View example in new window.

## Sample Code for this Example

Data:

YAHOO.example.Data = { webstats: [ ["home.html",20,400,44,657], ["blog.html",24,377,97,567], ["contact.html",32,548,42,543], ["about.html",8,465,12,946], ["pagenotfound.html",0,0,0,0] ] }

CSS:

/* custom styles for this example */ .yui-skin-sam .yui-dt-body { cursor:pointer; } /* when cells are selectable */ #cellrange, #singlecell { margin-top:2em; }

Markup:

<div id="cellblock"></div> <div id="cellrange"></div> <div id="singlecell"></div>

JavaScript:

YAHOO.util.Event.addListener(window, "load", function() { YAHOO.example.CellSelection = new function() { var myColumnDefs = [ {key:"col1", sortable:true}, {key:"col2", sortable:true}, {key:"col3", sortable:true}, {key:"col4", sortable:true} ]; this.myDataSource = new YAHOO.util.DataSource(YAHOO.example.Data.webstats); this.myDataSource.responseType = YAHOO.util.DataSource.TYPE_JSARRAY; this.myDataSource.responseSchema = { fields: ["col0","col1","col2","col3","col4"] }; this.cellBlockSelectDataTable = new YAHOO.widget.DataTable("cellblock", myColumnDefs, this.myDataSource, { caption:"Cell-Block Selection Mode with Support for Modifier Keys", selectionMode:"cellblock" }); // Subscribe to events for cell selection this.cellBlockSelectDataTable.subscribe("cellMouseoverEvent", this.cellBlockSelectDataTable.onEventHighlightCell); this.cellBlockSelectDataTable.subscribe("cellMouseoutEvent", this.cellBlockSelectDataTable.onEventUnhighlightCell); this.cellBlockSelectDataTable.subscribe("cellClickEvent", this.cellBlockSelectDataTable.onEventSelectCell); this.cellRangeSelectDataTable = new YAHOO.widget.DataTable("cellrange", myColumnDefs, this.myDataSource, { caption:"Example: Cell-Range Selection Mode Support for Modifier Keys", selectionMode:"cellrange" }); // Subscribe to events for cell selection this.cellRangeSelectDataTable.subscribe("cellMouseoverEvent", this.cellRangeSelectDataTable.onEventHighlightCell); this.cellRangeSelectDataTable.subscribe("cellMouseoutEvent", this.cellRangeSelectDataTable.onEventUnhighlightCell); this.cellRangeSelectDataTable.subscribe("cellClickEvent", this.cellRangeSelectDataTable.onEventSelectCell); this.singleCellSelectDataTable = new YAHOO.widget.DataTable("singlecell", myColumnDefs, this.myDataSource, { caption:"Single-Cell Selection Mode with Modifier Keys Disabled", selectionMode:"singlecell" }); // Subscribe to events for cell selection this.singleCellSelectDataTable.subscribe("cellMouseoverEvent", this.singleCellSelectDataTable.onEventHighlightCell); this.singleCellSelectDataTable.subscribe("cellMouseoutEvent", this.singleCellSelectDataTable.onEventUnhighlightCell); this.singleCellSelectDataTable.subscribe("cellClickEvent", this.singleCellSelectDataTable.onEventSelectCell); }; });

### YUI Logger Output:

Note: You are viewing this example in debug mode with logging enabled. This can significantly slow performance.

Reload with logging
and debugging disabled.

### DataTable Control (beta) Examples:

- Basic Example
- Progressive Enhancement
- Custom Cell Formatting
- Nested headers
- JSON Data Over XHR
- XML Data Over XHR With POST
- Textual Data Over XHR
- Local XML Data
- Client-side Pagination
- Client-side Sorting
- Server-side Pagination
- Server-side Sorting
- Server-side Pagination and Sorting, with Browser History Manager
- Fixed Scrolling
- Row Selection
- Cell Selection
- Inline Cell Editing
- Context Menu Integration
- Complex Example of Multiple Features
- Datatable with Autocomplete
- Skinning Model

### More DataTable Control (beta) Resources:

- User's Guide (external)
- API Documentation
- Cheat Sheet PDF (external)

Copyright © 2007 Yahoo! Inc. All rights reserved.

Privacy Policy - Terms of Service - Copyright Policy - Job Openings