YUI recommends YUI3.

YUI 2 has been deprecated since 2011. This site acts as an archive for files and documentation.

This documentation is no longer maintained.

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.

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"], fruit:["banana","cherry"], 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"], fruit:["apple"], 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"], fruit:["cherry"], 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"], fruit:["cherry"], 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"], fruit:["apple","cherry"], 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"], fruit:["banana"], 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"], fruit:["apple"], 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"], fruit:["kiwi"], 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"], fruit:["apple","banana"], 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"], fruit:["apple","cherry"], 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"], fruit:["banana"], 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"], fruit:["cherry"], 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"], fruit:["cherry"], 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"], fruit:["apple"], 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"], fruit:["kiwi","cherry"], 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"], fruit:["banana"], 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"], fruit:["apple"], 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"], fruit:["apple"], 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:"fruit", editor: new YAHOO.widget.DropdownCellEditor({multiple:true,dropdownOptions:["apple","banana","cherry"]})}, 
17            {key:"last_login", formatter:YAHOO.widget.DataTable.formatDate, editor: new YAHOO.widget.DateCellEditor()} 
18        ]; 
19 
20        var myDataSource = new YAHOO.util.DataSource(YAHOO.example.Data.addresses); 
21        myDataSource.responseType = YAHOO.util.DataSource.TYPE_JSARRAY; 
22        myDataSource.responseSchema = { 
23            fields: ["address","city","state","amount","active","colors","fruit",{key:"last_login",parser:"date"}] 
24        }; 
25 
26        var myDataTable = new YAHOO.widget.DataTable("cellediting", myColumnDefs, myDataSource, {}); 
27 
28        // Set up editing flow 
29        var highlightEditableCell = function(oArgs) { 
30            var elCell = oArgs.target; 
31            if(YAHOO.util.Dom.hasClass(elCell, "yui-dt-editable")) { 
32                this.highlightCell(elCell); 
33            } 
34        }; 
35        myDataTable.subscribe("cellMouseoverEvent", highlightEditableCell); 
36        myDataTable.subscribe("cellMouseoutEvent", myDataTable.onEventUnhighlightCell); 
37        myDataTable.subscribe("cellClickEvent", myDataTable.onEventShowCellEditor); 
38         
39        return { 
40            oDS: myDataSource, 
41            oDT: myDataTable 
42        }; 
43    }(); 
44}); 
view plain | print | ?

Copyright © 2013 Yahoo! Inc. All rights reserved.

Privacy Policy - Copyright Policy - Job Openings