DataTable Control: 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)
Loading...
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

<< 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 = function() {
3	// Custom sort handler to sort by state and then by areacode
4	// where a and b are Record instances to compare
5	var 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:sortStates}},
26	{key:"notes",label:"Notes (editable)",editor:"textbox",resizeable:true,sortable:true}
27	];
28
29	var myDataSource = new YAHOO.util.DataSource(YAHOO.example.Data.areacodes);
30	myDataSource.responseType = YAHOO.util.DataSource.TYPE_JSARRAY;
31	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	template: YAHOO.widget.Paginator.TEMPLATE_ROWS_PER_PAGE,
40	rowsPerPageOptions: [10,25,50,100],
41	pageLinks: 5
42	}),
43	draggableColumns:true
44	}
45
46	var myDataTable = new YAHOO.widget.DataTable("complex", myColumnDefs, myDataSource, myConfigs);
47	myDataTable.subscribe("rowClickEvent",myDataTable.onEventSelectRow);
48	myDataTable.subscribe("cellDblclickEvent",myDataTable.onEventShowCellEditor);
49	myDataTable.subscribe("editorBlurEvent", myDataTable.onEventSaveCellEditor);
50
51	// When cell is edited, pulse the color of the row yellow
52	var onCellEdit = function(oArgs) {
53	var elCell = oArgs.editor.getTdEl();
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	myDataTable.subscribe("editorSaveEvent", onCellEdit);
73
74	return {
75	oDS: myDataSource,
76	oDT: myDataTable
77	};
78	}();
79	});
	view plain \| print \| ?

YAHOO.util.Event.addListener(window, "load", function() {
    YAHOO.example.MultipleFeatures = function() {
        // Custom sort handler to sort by state and then by areacode
        // where a and b are Record instances to compare
        var 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:sortStates}},
            {key:"notes",label:"Notes (editable)",editor:"textbox",resizeable:true,sortable:true}
        ];

var myDataSource = new YAHOO.util.DataSource(YAHOO.example.Data.areacodes);
        myDataSource.responseType = YAHOO.util.DataSource.TYPE_JSARRAY;
        myDataSource.responseSchema = {
            fields: ["areacode","state"]
        };

var myConfigs = {
            sortedBy:{key:"areacode",dir:"asc"},
            paginator: new YAHOO.widget.Paginator({
                rowsPerPage: 25,
                template: YAHOO.widget.Paginator.TEMPLATE_ROWS_PER_PAGE,
                rowsPerPageOptions: [10,25,50,100],
                pageLinks: 5
            }),
            draggableColumns:true
        }

var myDataTable = new YAHOO.widget.DataTable("complex", myColumnDefs, myDataSource, myConfigs);
        myDataTable.subscribe("rowClickEvent",myDataTable.onEventSelectRow);
        myDataTable.subscribe("cellDblclickEvent",myDataTable.onEventShowCellEditor);
        myDataTable.subscribe("editorBlurEvent", myDataTable.onEventSaveCellEditor);

// When cell is edited, pulse the color of the row yellow
        var onCellEdit = function(oArgs) {
            var elCell = oArgs.editor.getTdEl();
            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();
        }
        myDataTable.subscribe("editorSaveEvent", onCellEdit);
        
        return {
            oDS: myDataSource,
            oDT: myDataTable
        };
    }();
});

Configuration for This Example

You can load the necessary JavaScript and CSS for this example from Yahoo's servers. Click here to load the YUI Dependency Configurator with all of this example's dependencies preconfigured.

YUI Library Examples: DataTable Control: Complex Example of Multiple Features

Sample Code for this Example

Configuration for This Example

YUI Logger Output:

Logger Console

DataTable Control Examples:

More DataTable Control Resources: