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 | last_login |
---|---|---|---|---|---|---|---|
1236 Some Street | San Francisco | CA | 5 | yes | red | 4/19/2007 | |
3271 Another Ave | New York | NY | 3 | no | red,blue | 2/15/2006 | |
9996 Random Road | Los Angeles | CA | 0 | maybe | green | 1/23/2004 | |
1623 Some Street | San Francisco | CA | 5 | yes | red | 4/19/2007 | |
3217 Another Ave | New York | NY | 3 | no | red,blue | 2/15/2006 | |
9899 Random Road | Los Angeles | CA | 0 | maybe | green | 1/23/2004 | |
1723 Some Street | San Francisco | CA | 5 | yes | red | 4/19/2007 | |
3241 Another Ave | New York | NY | 3 | no | red,blue | 2/15/2006 | |
9909 Random Road | Los Angeles | CA | 0 | maybe | green | 1/23/2004 | |
1623 Some Street | San Francisco | CA | 5 | yes | red | 4/19/2007 | |
3721 Another Ave | New York | NY | 3 | no | red,blue | 2/15/2006 | |
9989 Random Road | Los Angeles | CA | 0 | maybe | green | 1/23/2004 | |
1293 Some Street | San Francisco | CA | 5 | yes | red | 4/19/2007 | |
3621 Another Ave | New York | NY | 3 | no | red,blue | 2/15/2006 | |
9959 Random Road | Los Angeles | CA | 0 | maybe | green | 1/23/2004 | |
6123 Some Street | San Francisco | CA | 5 | yes | red | 4/19/2007 | |
3281 Another Ave | New York | NY | 3 | no | red,blue | 2/15/2006 | |
9989 Random Road | Los Angeles | CA | 0 | maybe | green | 1/23/2004 | |
Loading data... |
Data:
1 | YAHOO.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:
1 | YAHOO.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 | ? |
INFO0ms (+0) 12:16:26 AM:global
Logger initialized
Note: You are viewing this example in debug mode with logging enabled. This can significantly slow performance.
Copyright © 2008 Yahoo! Inc. All rights reserved.
Privacy Policy - Terms of Service - Copyright Policy - Job Openings