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: "001", 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: 001, field2:new Date(2007, 11, 1), field3:1, field4:34.12, field5:"charlie", field6:"http://www.yahoo.com"}, 
7            {field1: "aaab", field2:new Date(2007, 1, 11), field3:1112, field4:"03", field5:"diane", field6:"http://www.yahoo.com"}, 
8            {field1: "1", field2:new Date(1999, 1, 11), field3:124, field4:03, field5:"edgar", field6:"http://www.yahoo.com"}, 
9            {field1: new Date(1999, 1, 11), field2:"January 10, 2005", field3:"12", field4:"34", field5:"francine", field6:"http://www.yahoo.com"}, 
10            {field1: "11", 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: 110, field2:"1/11/2005", field3:"109", field4:23.456, field5:"igor", field6:"http://www.yahoo.com"}, 
13            {field1: [1,2,3], 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:

1abc 
2YAHOO.util.Event.addListener(window, "load"function() { 
3    YAHOO.example.CustomFormatting = new function() { 
4        // Define a custom formatter for the Column labeled "flag" 
5        // draws an up icon if value of field3 is greater than 100, 
6        // otherwise renders a down icon 
7        this.myCustomFormatter = function(elCell, oRecord, oColumn, oData) { 
8            YAHOO.util.Dom.addClass(elCell, "flag"); 
9            if(oRecord.getData("field3") > 100) { 
10                elCell.innerHTML = ' <img src="assets/img/arrow_up.gif">'
11            } 
12            else { 
13                elCell.innerHTML = ' <img src="assets/img/arrow_dn.gif">'
14            } 
15        }; 
16 
17        // Override the built-in formatter 
18        YAHOO.widget.Column.formatEmail = function(elCell, oRecord, oColumn, oData) { 
19            var user = oData; 
20            elCell.innerHTML = "<a href=\"mailto:" + user + "@mycompany.com\">" + user + "</a>"
21        }; 
22 
23        var myColumnDefs = [ 
24            {label:"flag", formatter:this.myCustomFormatter}, // use custom formatter 
25            {label:"radio", formatter:YAHOO.widget.DataTable.formatRadio}, // use the built-in radio formatter 
26            {label:"check", formatter:YAHOO.widget.DataTable.formatCheckbox}, // use the built-in checkbox formatter 
27            {label:"button", formatter:YAHOO.widget.DataTable.formatButton}, // use the built-in button formatter 
28            {key:"field1", sortable:true}, 
29            {key:"field2", sortable:true, formatter:YAHOO.widget.DataTable.formatDate}, // use the built-in date formatter 
30            {key:"field3", sortable:true}, 
31            {key:"field4", sortable:true, formatter:YAHOO.widget.DataTable.formatCurrency}, // use the built-in currency formatter 
32            {key:"field5", sortable:true, formatter:YAHOO.widget.DataTable.formatEmail}, // use the overridden email formatter 
33            {key:"field6", sortable:true, formatter:YAHOO.widget.DataTable.formatLink} // use the built-in link formatter 
34        ]; 
35 
36        this.myDataSource = new YAHOO.util.DataSource(YAHOO.example.Data.formatting); 
37        this.myDataSource.responseType = YAHOO.util.DataSource.TYPE_JSON; 
38        this.myDataSource.responseSchema = { 
39            resultsList: ["items"], 
40            // Use the parse methods to populate the RecordSet with the right data types 
41            fields: [ 
42                {key:"field1", parser:YAHOO.util.DataSource.parseString}, // point to the string parser 
43                {key:"field2", parser:YAHOO.util.DataSource.parseDate}, // point to the date parser 
44                {key:"field3", parser:YAHOO.util.DataSource.parseNumber}, // point to the number parser 
45                {key:"field4", parser:YAHOO.util.DataSource.parseNumber}, // point to the number parser 
46                {key:"field5"}, // this is already string data so no parser needed 
47                {key:"field6"// this is already string data so no parser needed 
48            ] 
49        }; 
50 
51        this.myDataTable = new YAHOO.widget.DataTable("formatting", myColumnDefs, 
52                this.myDataSource, {caption:"Example: Custom Formatting"}); 
53 
54        this.myDataTable.subscribe("radioClickEvent"function(oArgs){//debugger; 
55            var elRadio = oArgs.target; 
56            var elRecord = this.getRecord(elRadio); 
57            var name = elRecord.getData("field5"); 
58            alert("The radio button for " + name + " was selected"); 
59        }); 
60 
61        this.myDataTable.subscribe("checkboxClickEvent"function(oArgs){ 
62            var elCheckbox = oArgs.target; 
63            var elRecord = this.getRecord(elCheckbox); 
64            var name = elRecord.getData("field5"); 
65            alert("Checkbox was " + (elCheckbox.checked ? "" : "un") + "checked for " + name); 
66        }); 
67 
68        this.myDataTable.subscribe("buttonClickEvent"function(oArgs){ 
69            var oRecord = this.getRecord(oArgs.target); 
70            alert(YAHOO.lang.dump(oRecord.getData())); 
71        }); 
72    }; 
73}); 
view plain | print | ?

Copyright © 2007 Yahoo! Inc. All rights reserved.

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