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.

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

More DataTable Control (beta) Resources:

Copyright © 2008 Yahoo! Inc. All rights reserved.

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