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

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
        };
    }();
});

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

More DataTable Control Resources:

All YUI 2.x users should review the YUI 2.8.2 security bulletin, which discusses a vulnerability present in YUI 2.4.0-2.8.1.