Yahoo! Developer Network Home - Help

YUI Library Examples: DataTable Control (beta): Custom Cell Formatting

DataTable Control (beta): Custom Cell Formatting

This example demonstrates a variety of ways to format data in a DataTable, including form elements, dates, currency, email addresses, and links. The first Column displays custom UI that is based on data in another Column and uses classes to highlight its cells green or red.

Sample Code for this Example

Data:

1YAHOO.example.Data = { 
2    formatting: { 
3        items: [ 
4            {field1: "bananas", field2:new Date(2007, 1, 1), field3:111, field4:"23.4", field5:"bob", field6:"http://www.yahoo.com"}, 
5            {field1: undefined, field2:new Date(2006, 1, 1), field3:12.3, field4:"35.12", field5:"ann", field6:"http://www.yahoo.com"}, 
6            {field1: "apples", field2:new Date(2007, 11, 1), field3:1, field4:34.12, field5:"charlie", field6:"http://www.yahoo.com"}, 
7            {field1: "bananas", field2:new Date(2007, 1, 11), field3:1112, field4:"03", field5:"diane", field6:"http://www.yahoo.com"}, 
8            {field1: "cherries", field2:new Date(1999, 1, 11), field3:124, field4:03, field5:"edgar", field6:"http://www.yahoo.com"}, 
9            {field1: "", field2:"January 10, 2005", field3:"12", field4:"34", field5:"francine", field6:"http://www.yahoo.com"}, 
10            {field1: "unknown", field2:"January 1, 2005", field3:"19.1", field4:"234.5", field5:"george", field6:"http://www.yahoo.com"}, 
11            {field1: null, field2:"1/11/05", field3:"10.02", field4:"345.654", field5:"hannah", field6:"http://www.yahoo.com"}, 
12            {field1: "cherries", field2:"1/11/2005", field3:"109", field4:23.456, field5:"igor", field6:"http://www.yahoo.com"}, 
13            {field1: "bananas", field2:"November 1, 2005", field3:"11111", field4:23.0123, field5:"julie", field6:"http://www.yahoo.com"} 
14        ] 
15    } 
16} 
view plain | print | ?

CSS:

1.yui-skin-sam .yui-dt td.up { 
2    background-color: #efe; 
3} 
4.yui-skin-sam .yui-dt td.down { 
5    background-color: #fee; 
6} 
view plain | print | ?

Markup:

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

JavaScript:

1YAHOO.util.Event.addListener(window, "load", function() { 
2    YAHOO.example.CustomFormatting = new function() { 
3        // Define a custom formatter for the Column labeled "flag" 
4        // draws an up icon and adds class "up" to the cell to affect 
5        // a green background color if value of field3 is greater than 100. 
6        // Otherwise renders a down icon and assigns class "down", setting 
7        // the background color to red. 
8        this.myCustomFormatter = function(elLiner, oRecord, oColumn, oData) { 
9            if(oRecord.getData("field3") > 100) { 
10                YAHOO.util.Dom.replaceClass(elLiner.parentNode, "down", "up"); 
11                elCell.innerHTML = ' <img src="../../build/datatable/assets/skins/sam/dt-arrow-up.png">'; 
12            } 
13            else { 
14                YAHOO.util.Dom.replaceClass(elLiner.parentNode, "up","down"); 
15                elCell.innerHTML = ' <img src="../../build/datatable/assets/skins/sam/dt-arrow-dn.png">'; 
16            } 
17        }; 
18         
19        // Add the custom formatter to the shortcuts 
20        YAHOO.widget.DataTable.Formatter.myCustom = this.myCustomFormatter; 
21 
22        // Override the built-in formatter 
23        YAHOO.widget.DataTable.formatEmail = function(elCell, oRecord, oColumn, oData) { 
24            var user = oData; 
25            elCell.innerHTML = "<a href=\"mailto:" + user + "@mycompany.com\">" + user + "</a>"; 
26        }; 
27         
28 
29        var myColumnDefs = [ 
30            {key:"flag", formatter:"myCustom"}, // use custom shortcut 
31            {key:"radio", formatter:"radio"}, // use the built-in radio formatter 
32            {key:"check", formatter:"checkbox"}, // use the built-in checkbox formatter (shortcut) 
33            {key:"button", label:"Show record data", formatter:YAHOO.widget.DataTable.formatButton}, // use the built-in button formatter 
34            {key:"field1", formatter:"dropdown", dropdownOptions:["apples","bananas","cherries"],sortable:true}, 
35            {key:"field2", sortable:true, formatter:"date"}, // use the built-in date formatter 
36            {key:"field3", sortable:true}, 
37            {key:"field4", sortable:true, formatter:"currency"}, // use the built-in currency formatter 
38            {key:"field5", sortable:true, formatter:YAHOO.widget.DataTable.formatEmail}, // use the overridden email formatter 
39            {key:"field6", sortable:true, formatter:YAHOO.widget.DataTable.formatLink} // use the built-in link formatter 
40        ]; 
41 
42        this.myDataSource = new YAHOO.util.DataSource(YAHOO.example.Data.multitypes); 
43        this.myDataSource.responseType = YAHOO.util.DataSource.TYPE_JSON; 
44        this.myDataSource.responseSchema = { 
45            resultsList: "items", 
46            // Use the parse methods to populate the RecordSet with the right data types 
47            fields: [ 
48                {key:"field1", parser:YAHOO.util.DataSource.parseString}, // point to the string parser 
49                {key:"field2", parser:YAHOO.util.DataSource.parseDate}, // point to the date parser 
50                {key:"field3", parser:YAHOO.util.DataSource.parseNumber}, // point to the number parser 
51                {key:"field4", parser:YAHOO.util.DataSource.parseNumber}, // point to the number parser 
52                {key:"field5"}, // this is already string data so no parser needed 
53                {key:"field6"} // this is already string data so no parser needed 
54            ] 
55        }; 
56 
57        this.myDataTable = new YAHOO.widget.DataTable("formatting", myColumnDefs, this.myDataSource); 
58 
59        var lastSelectedRadioRecord = null; 
60        this.myDataTable.subscribe("radioClickEvent", function(oArgs){ 
61            if(lastSelectedRadioRecord) { 
62                lastSelectedRadioRecord.setData("radio",false); 
63            } 
64            var elRadio = oArgs.target; 
65            var oRecord = this.getRecord(elRadio); 
66            oRecord.setData("radio",true); 
67            lastSelectedRadioRecord = oRecord; 
68            var name = oRecord.getData("field5"); 
69        }); 
70 
71        this.myDataTable.subscribe("checkboxClickEvent", function(oArgs){ 
72            var elCheckbox = oArgs.target; 
73            var oRecord = this.getRecord(elCheckbox); 
74            oRecord.setData("check",elCheckbox.checked); 
75        }); 
76 
77        this.myDataTable.subscribe("buttonClickEvent", function(oArgs){ 
78            var oRecord = this.getRecord(oArgs.target); 
79            alert(YAHOO.lang.dump(oRecord.getData())); 
80        }); 
81 
82        this.myDataTable.subscribe("dropdownChangeEvent", function(oArgs){ 
83            var elDropdown = oArgs.target; 
84            var oRecord = this.getRecord(elDropdown); 
85            oRecord.setData("field1",elDropdown.options[elDropdown.selectedIndex].value); 
86        }); 
87    }; 
88}); 
view plain | print | ?

More DataTable Control (beta) Resources:

Copyright © 2008 Yahoo! Inc. All rights reserved.

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