YUI Library Home

YUI Library Examples: DataTable Control: Inline Cell Editing

DataTable Control: 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.

View example in new window.

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

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 .yui-dt-col-address pre { font-family:arial;font-size:100%; } /* Use PRE in first col to preserve linebreaks*/ 
view plain | print | ?

Markup:

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

JavaScript:

1YAHOO.util.Event.addListener(window, "load", function() { 
2    YAHOO.example.InlineCellEditing = function() { 
3        // Custom formatter for "address" column to preserve line breaks 
4        var 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:formatAddress, editor: new YAHOO.widget.TextareaCellEditor()}, 
11            {key:"city", editor: new YAHOO.widget.TextboxCellEditor({disableBtns:true})}, 
12            {key:"state", editor: new YAHOO.widget.DropdownCellEditor({dropdownOptions:YAHOO.example.Data.stateAbbrs,disableBtns:true})}, 
13            {key:"amount", editor: new YAHOO.widget.TextboxCellEditor({validator:YAHOO.widget.DataTable.validateNumber})}, 
14            {key:"active", editor: new YAHOO.widget.RadioCellEditor({radioOptions:["yes","no","maybe"],disableBtns:true})}, 
15            {key:"colors", editor: new YAHOO.widget.CheckboxCellEditor({checkboxOptions:["red","yellow","blue"]})}, 
16            {key:"last_login", formatter:YAHOO.widget.DataTable.formatDate, editor: new YAHOO.widget.DateCellEditor()} 
17        ]; 
18 
19        var myDataSource = new YAHOO.util.DataSource(YAHOO.example.Data.addresses); 
20        myDataSource.responseType = YAHOO.util.DataSource.TYPE_JSARRAY; 
21        myDataSource.responseSchema = { 
22            fields: ["address","city","state","amount","active","colors",{key:"last_login",parser:"date"}] 
23        }; 
24 
25        var myDataTable = new YAHOO.widget.DataTable("cellediting", myColumnDefs, myDataSource, {}); 
26 
27        // Set up editing flow 
28        var 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        myDataTable.subscribe("cellMouseoverEvent", highlightEditableCell); 
35        myDataTable.subscribe("cellMouseoutEvent", myDataTable.onEventUnhighlightCell); 
36        myDataTable.subscribe("cellClickEvent", myDataTable.onEventShowCellEditor); 
37         
38        return { 
39            oDS: myDataSource, 
40            oDT: myDataTable 
41        }; 
42    }(); 
43}); 
view plain | print | ?

Configuration for This Example

You can load the necessary JavaScript and CSS for this example from Yahoo's servers. Click here to load the YUI Dependency Configurator with all of this example's dependencies preconfigured.

YUI Logger Output:

Logger Console

INFO 0ms (+0) 12:30:35 AM:
global
Logger initialized

Note: You are viewing this example in debug mode with logging enabled. This can significantly slow performance.

Reload with logging
and debugging disabled.

More DataTable Control Resources:

Copyright © 2009 Yahoo! Inc. All rights reserved.

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