YUI Library Examples: DataTable Control (beta): Inline Cell Editing

DataTable Control (beta): Inline Cell Editing

This example demonstrates basic inline cell editing features, as well as more complex customizations, such as input validation and click-to-save interactions.

uneditable
address
city
state
amount
active
colors
last_login
uneditable
address
city
state
amount
active
colors
1236 Some Street
San Francisco
CA
5
yes
red
3271 Another Ave
New York
NY
3
no
red,blue
9996 Random Road
Los Angeles
CA
0
maybe
green
1623 Some Street
San Francisco
CA
5
yes
red
3217 Another Ave
New York
NY
3
no
red,blue
9899 Random Road
Los Angeles
CA
0
maybe
green
1723 Some Street
San Francisco
CA
5
yes
red
3241 Another Ave
New York
NY
3
no
red,blue
9909 Random Road
Los Angeles
CA
0
maybe
green
1623 Some Street
San Francisco
CA
5
yes
red
3721 Another Ave
New York
NY
3
no
red,blue
9989 Random Road
Los Angeles
CA
0
maybe
green
1293 Some Street
San Francisco
CA
5
yes
red
3621 Another Ave
New York
NY
3
no
red,blue
9959 Random Road
Los Angeles
CA
0
maybe
green
6123 Some Street
San Francisco
CA
5
yes
red
3281 Another Ave
New York
NY
3
no
red,blue
9989 Random Road
Los Angeles
CA
0
maybe
green
Loading data...

Sample Code for this Example

Data:

1YAHOO.example.Data = { 
2    addresses: [ 
3        {name:"John A. Smith", address:"1236 Some Street", city:"San Francisco", state:"CA", amount:5, active:"yes", colors:["red"], last_login:"4/19/2007"}, 
4        {name:"Joan B. Jones", address:"3271 Another Ave", city:"New York", state:"NY", amount:3, active:"no", colors:["red","blue"], last_login:"2/15/2006"}, 
5        {name:"Bob C. Uncle", address:"9996 Random Road", city:"Los Angeles", state:"CA", amount:0, active:"maybe", colors:["green"], last_login:"1/23/2004"}, 
6        {name:"John D. Smith", address:"1623 Some Street", city:"San Francisco", state:"CA", amount:5, active:"yes", colors:["red"], last_login:"4/19/2007"}, 
7        {name:"Joan E. Jones", address:"3217 Another Ave", city:"New York", state:"NY", amount:3, active:"no", colors:["red","blue"], last_login:"2/15/2006"}, 
8        {name:"Bob F. Uncle", address:"9899 Random Road", city:"Los Angeles", state:"CA", amount:0, active:"maybe", colors:["green"], last_login:"1/23/2004"}, 
9        {name:"John G. Smith", address:"1723 Some Street", city:"San Francisco", state:"CA", amount:5, active:"yes", colors:["red"], last_login:"4/19/2007"}, 
10        {name:"Joan H. Jones", address:"3241 Another Ave", city:"New York", state:"NY", amount:3, active:"no", colors:["red","blue"], last_login:"2/15/2006"}, 
11        {name:"Bob I. Uncle", address:"9909 Random Road", city:"Los Angeles", state:"CA", amount:0, active:"maybe", colors:["green"], last_login:"1/23/2004"}, 
12        {name:"John J. Smith", address:"1623 Some Street", city:"San Francisco", state:"CA", amount:5, active:"yes", colors:["red"], last_login:"4/19/2007"}, 
13        {name:"Joan K. Jones", address:"3721 Another Ave", city:"New York", state:"NY", amount:3, active:"no", colors:["red","blue"], last_login:"2/15/2006"}, 
14        {name:"Bob L. Uncle", address:"9989 Random Road", city:"Los Angeles", state:"CA", amount:0, active:"maybe", colors:["green"], last_login:"1/23/2004"}, 
15        {name:"John M. Smith", address:"1293 Some Street", city:"San Francisco", state:"CA", amount:5, active:"yes", colors:["red"], last_login:"4/19/2007"}, 
16        {name:"Joan N. Jones", address:"3621 Another Ave", city:"New York", state:"NY", amount:3, active:"no", colors:["red","blue"], last_login:"2/15/2006"}, 
17        {name:"Bob O. Uncle", address:"9959 Random Road", city:"Los Angeles", state:"CA", amount:0, active:"maybe", colors:["green"], last_login:"1/23/2004"}, 
18        {name:"John P. Smith", address:"6123 Some Street", city:"San Francisco", state:"CA", amount:5, active:"yes", colors:["red"], last_login:"4/19/2007"}, 
19        {name:"Joan Q. Jones", address:"3281 Another Ave", city:"New York", state:"NY", amount:3, active:"no", colors:["red","blue"], last_login:"2/15/2006"}, 
20        {name:"Bob R. Uncle", address:"9989 Random Road", city:"Los Angeles", state:"CA", amount:0, active:"maybe", colors:["green"], last_login:"1/23/2004"} 
21    ] 
22
view plain | print | ?

CSS:

1/* custom styles for this example */ 
2.yui-skin-sam pre { font-family:arial;font-size:100%} /* Reset PRE */ 
view plain | print | ?

Markup:

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

JavaScript:

1YAHOO.util.Event.addListener(window, "load"function() { 
2    YAHOO.example.InlineCellEditing = new function() { 
3        // Custom formatter for "address" column to preserve line breaks 
4        this.formatAddress = function(elCell, oRecord, oColumn, oData) { 
5            elCell.innerHTML = "<pre class=\"address\">" + oData + "</pre>"
6        }; 
7 
8        var myColumnDefs = [ 
9            {key:"uneditable"}, 
10            {key:"address", formatter:this.formatAddress, editor:"textarea"}, 
11            {key:"city", editor:"textbox"}, 
12            {key:"state", editor:"dropdown", editorOptions:{dropdownOptions:YAHOO.example.Data.stateAbbrs}}, 
13            {key:"amount", editor:"textbox", editorOptions:{validator:YAHOO.widget.DataTable.validateNumber}}, 
14            {key:"active", editor:"radio", editorOptions:{radioOptions:["yes","no","maybe"],disableBtns:true}}, 
15            {key:"colors", editor:"checkbox", editorOptions:{checkboxOptions:["red","yellow","blue"]}}, 
16            {key:"last_login", formatter:YAHOO.widget.DataTable.formatDate, editor:"date"
17        ]; 
18 
19        this.myDataSource = new YAHOO.util.DataSource(YAHOO.example.Data.addresses); 
20        this.myDataSource.responseType = YAHOO.util.DataSource.TYPE_JSARRAY; 
21        this.myDataSource.responseSchema = { 
22            fields: ["address","city","state","amount","active","colors",{key:"last_login",parser:YAHOO.util.DataSource.parseDate}] 
23        }; 
24 
25        this.myDataTable = new YAHOO.widget.DataTable("cellediting", myColumnDefs, this.myDataSource); 
26 
27        // Set up editing flow 
28        this.highlightEditableCell = function(oArgs) { 
29            var elCell = oArgs.target; 
30            if(YAHOO.util.Dom.hasClass(elCell, "yui-dt-editable")) { 
31                this.highlightCell(elCell); 
32            } 
33        }; 
34        this.myDataTable.subscribe("cellMouseoverEvent"this.highlightEditableCell); 
35        this.myDataTable.subscribe("cellMouseoutEvent"this.myDataTable.onEventUnhighlightCell); 
36        this.myDataTable.subscribe("cellClickEvent"this.myDataTable.onEventShowCellEditor); 
37 
38        // Hook into custom event to customize save-flow of "radio" editor 
39        this.myDataTable.subscribe("editorUpdateEvent"function(oArgs) { 
40            if(oArgs.editor.column.key === "active") { 
41                this.saveCellEditor(); 
42            } 
43        }); 
44        this.myDataTable.subscribe("editorBlurEvent"function(oArgs) { 
45            this.cancelCellEditor(); 
46        }); 
47    }; 
48}); 
view plain | print | ?

Copyright © 2008 Yahoo! Inc. All rights reserved.

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