Yahoo! Developer Network Home - Help

Site Search (YDN & YUIBlog):

# YUI Library Examples: DataTable Control (beta): Complex Example of Multiple Features

# DataTable Control (beta): Complex Example of Multiple Features

A demonstration of several DataTable features combined in one instance. The features implemented in this example require the Drag and Drop and Animation utilities.

View example in new window.

## Sample Code for this Example

Data:

YAHOO.example.Data = { areacodes: [ {areacode: "201", state: "New Jersey"}, {areacode: "202", state: "Washington, DC"}, {areacode: "203", state: "Connecticut"}, ... ] }

CSS:

/* No custom CSS. */

Markup:

<div id="complex"></div>

JavaScript:

YAHOO.util.Event.addListener(window, "load", function() { YAHOO.example.MultipleFeatures = new function() { // Custom sort handler to sort by state and then by areacode // where a and b are Record instances to compare this.sortStates = function(a, b, desc) { // Deal with empty values if(!YAHOO.lang.isValue(a)) { return (!YAHOO.lang.isValue(b)) ? 0 : 1; } else if(!YAHOO.lang.isValue(b)) { return -1; } // First compare by state var comp = YAHOO.util.Sort.compare; var compState = comp(a.getData("state"), b.getData("state"), desc); // If states are equal, then compare by areacode return (compState !== 0) ? compState : comp(a.getData("areacode"), b.getData("areacode"), desc); }; var myColumnDefs = [ {key:"areacode",label:"Area Codes",width:100,resizeable:true,sortable:true}, {key:"state",label:"States",width:250,resizeable:true,sortable:true, sortOptions:{sortFunction:this.sortStates}}, {key:"notes",label:"Notes (editable)",editor:"textbox",resizeable:true,sortable:true} ]; this.myDataSource = new YAHOO.util.DataSource(YAHOO.example.Data.areacodes); this.myDataSource.responseType = YAHOO.util.DataSource.TYPE_JSARRAY; this.myDataSource.responseSchema = { fields: ["areacode","state"] }; var myConfigs = { sortedBy:{key:"areacode",dir:"asc"}, paginator: new YAHOO.widget.Paginator({ rowsPerPage: 25, dropdownOptions: [10,25,50,100], pageLinks: 5 }), scrollable:true, height:"25em" } this.myDataTable = new YAHOO.widget.DataTable("complex", myColumnDefs, this.myDataSource, myConfigs); this.myDataTable.subscribe("rowClickEvent",this.myDataTable.onEventSelectRow); this.myDataTable.subscribe("cellDblclickEvent",this.myDataTable.onEventShowCellEditor); this.myDataTable.subscribe("editorBlurEvent", this.myDataTable.onEventSaveCellEditor); // When cell is edited, pulse the color of the row yellow this.onCellEdit = function(oArgs) { var elCell = oArgs.editor.cell; var oOldData = oArgs.oldData; var oNewData = oArgs.newData; // Grab the row el and the 2 colors var elRow = this.getTrEl(elCell); var origColor = YAHOO.util.Dom.getStyle(elRow.cells[0], "backgroundColor"); var pulseColor = "#ff0"; // Create a temp anim instance that nulls out when anim is complete var rowColorAnim = new YAHOO.util.ColorAnim(elRow.cells, { backgroundColor:{to:origColor, from:pulseColor}, duration:2}); var onComplete = function() { rowColorAnim = null; YAHOO.util.Dom.setStyle(elRow.cells, "backgroundColor", ""); } rowColorAnim.onComplete.subscribe(onComplete); rowColorAnim.animate(); } this.myDataTable.subscribe("editorSaveEvent", this.onCellEdit); }; });

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

### More DataTable Control (beta) Resources:

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

Copyright © 2008 Yahoo! Inc. All rights reserved.

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