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.

<< first < prev 12 3 4 5 next > last >>

Area Codes	States	Notes (editable)

Area Codes	States	Notes (editable)
201	New Jersey
202	Washington, DC
203	Connecticut
204	Manitoba, Canada
205	Alabama
206	Washington
207	Maine
208	Idaho
209	California
210	Texas
212	New York
213	California
214	Texas
215	Pennsylvania
216	Ohio
217	Illinois
218	Minnesota
219	Indiana
224	Illinois
225	Louisiana
227	Maryland
228	Mississippi
229	Georgia
231	Michigan
234	Ohio
Loading data...

<< first < prev 12 3 4 5 next > last >>

Sample Code for this Example

Data:


1	YAHOO.example.Data = {
2	areacodes: [
3	{areacode: "201", state: "New Jersey"},
4	{areacode: "202", state: "Washington, DC"},
5	{areacode: "203", state: "Connecticut"},
6	...
7	]
8	}
	view plain \| print \| ?

CSS:


1	/* No custom CSS. */
	view plain \| print \| ?

Markup:


1	<div id="complex"></div>
	view plain \| print \| ?

JavaScript:


1	YAHOO.util.Event.addListener(window, "load", function() {
2	YAHOO.example.MultipleFeatures = new function() {
3	// Custom sort handler to sort by state and then by areacode
4	// where a and b are Record instances to compare
5	this.sortStates = function(a, b, desc) {
6	// Deal with empty values
7	if(!YAHOO.lang.isValue(a)) {
8	return (!YAHOO.lang.isValue(b)) ? 0 : 1;
9	}
10	else if(!YAHOO.lang.isValue(b)) {
11	return -1;
12	}
13
14	// First compare by state
15	var comp = YAHOO.util.Sort.compare;
16	var compState = comp(a.getData("state"), b.getData("state"), desc);
17
18	// If states are equal, then compare by areacode
19	return (compState !== 0) ? compState : comp(a.getData("areacode"), b.getData("areacode"), desc);
20	};
21
22	var myColumnDefs = [
23	{key:"areacode",label:"Area Codes",width:100,resizeable:true,sortable:true},
24	{key:"state",label:"States",width:250,resizeable:true,sortable:true,
25	sortOptions:{sortFunction:this.sortStates}},
26	{key:"notes",label:"Notes (editable)",editor:"textbox",resizeable:true,sortable:true}
27	];
28
29	this.myDataSource = new YAHOO.util.DataSource(YAHOO.example.Data.areacodes);
30	this.myDataSource.responseType = YAHOO.util.DataSource.TYPE_JSARRAY;
31	this.myDataSource.responseSchema = {
32	fields: ["areacode","state"]
33	};
34
35	var myConfigs = {
36	sortedBy:{key:"areacode",dir:"asc"},
37	paginator: new YAHOO.widget.Paginator({
38	rowsPerPage: 25,
39	dropdownOptions: [10,25,50,100],
40	pageLinks: 5
41	}),
42	scrollable:true,
43	height:"25em"
44	}
45
46	this.myDataTable = new YAHOO.widget.DataTable("complex", myColumnDefs, this.myDataSource, myConfigs);
47	this.myDataTable.subscribe("rowClickEvent",this.myDataTable.onEventSelectRow);
48	this.myDataTable.subscribe("cellDblclickEvent",this.myDataTable.onEventShowCellEditor);
49	this.myDataTable.subscribe("editorBlurEvent", this.myDataTable.onEventSaveCellEditor);
50
51	// When cell is edited, pulse the color of the row yellow
52	this.onCellEdit = function(oArgs) {
53	var elCell = oArgs.editor.cell;
54	var oOldData = oArgs.oldData;
55	var oNewData = oArgs.newData;
56
57	// Grab the row el and the 2 colors
58	var elRow = this.getTrEl(elCell);
59	var origColor = YAHOO.util.Dom.getStyle(elRow.cells[0], "backgroundColor");
60	var pulseColor = "#ff0";
61
62	// Create a temp anim instance that nulls out when anim is complete
63	var rowColorAnim = new YAHOO.util.ColorAnim(elRow.cells, {
64	backgroundColor:{to:origColor, from:pulseColor}, duration:2});
65	var onComplete = function() {
66	rowColorAnim = null;
67	YAHOO.util.Dom.setStyle(elRow.cells, "backgroundColor", "");
68	}
69	rowColorAnim.onComplete.subscribe(onComplete);
70	rowColorAnim.animate();
71	}
72	this.myDataTable.subscribe("editorSaveEvent", this.onCellEdit);
73	};
74	});
	view plain \| print \| ?

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: Logging and debugging is currently turned off for this example.

Reload with logging
and debugging enabled.

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

Sample Code for this Example

YUI Logger Output:

DataTable Control (beta) Examples:

More DataTable Control (beta) Resources: