Yahoo! Developer Network Home - Help

YDN Site Search

# 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.

View example in new window.

## Sample Code for this Example

Data:

YAHOO.example.Data = { addresses: [ {name:"John A. Smith", address:"1236 Some Street", city:"San Francisco", state:"CA", amount:5, active:"yes", colors:["red"], last_login:"4/19/2007"}, {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"}, {name:"Bob C. Uncle", address:"9996 Random Road", city:"Los Angeles", state:"CA", amount:0, active:"maybe", colors:["green"], last_login:"1/23/2004"}, {name:"John D. Smith", address:"1623 Some Street", city:"San Francisco", state:"CA", amount:5, active:"yes", colors:["red"], last_login:"4/19/2007"}, {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"}, {name:"Bob F. Uncle", address:"9899 Random Road", city:"Los Angeles", state:"CA", amount:0, active:"maybe", colors:["green"], last_login:"1/23/2004"}, {name:"John G. Smith", address:"1723 Some Street", city:"San Francisco", state:"CA", amount:5, active:"yes", colors:["red"], last_login:"4/19/2007"}, {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"}, {name:"Bob I. Uncle", address:"9909 Random Road", city:"Los Angeles", state:"CA", amount:0, active:"maybe", colors:["green"], last_login:"1/23/2004"}, {name:"John J. Smith", address:"1623 Some Street", city:"San Francisco", state:"CA", amount:5, active:"yes", colors:["red"], last_login:"4/19/2007"}, {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"}, {name:"Bob L. Uncle", address:"9989 Random Road", city:"Los Angeles", state:"CA", amount:0, active:"maybe", colors:["green"], last_login:"1/23/2004"}, {name:"John M. Smith", address:"1293 Some Street", city:"San Francisco", state:"CA", amount:5, active:"yes", colors:["red"], last_login:"4/19/2007"}, {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"}, {name:"Bob O. Uncle", address:"9959 Random Road", city:"Los Angeles", state:"CA", amount:0, active:"maybe", colors:["green"], last_login:"1/23/2004"}, {name:"John P. Smith", address:"6123 Some Street", city:"San Francisco", state:"CA", amount:5, active:"yes", colors:["red"], last_login:"4/19/2007"}, {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"}, {name:"Bob R. Uncle", address:"9989 Random Road", city:"Los Angeles", state:"CA", amount:0, active:"maybe", colors:["green"], last_login:"1/23/2004"} ] }

CSS:

/* custom styles for this example */ .yui-skin-sam pre { font-family:arial;font-size:100%; } /* Reset PRE */

Markup:

<div id="cellediting"></div>

JavaScript:

YAHOO.util.Event.addListener(window, "load", function() { YAHOO.example.InlineCellEditing = new function() { // Custom formatter for "address" column to preserve line breaks this.formatAddress = function(elCell, oRecord, oColumn, oData) { elCell.innerHTML = "<pre class=\"address\">" + oData + "</pre>"; }; var myColumnDefs = [ {key:"uneditable"}, {key:"address", formatter:this.formatAddress, editor:"textarea"}, {key:"city", editor:"textbox"}, {key:"state", editor:"dropdown", editorOptions:{dropdownOptions:YAHOO.example.Data.stateAbbrs}}, {key:"amount", editor:"textbox", editorOptions:{validator:YAHOO.widget.DataTable.validateNumber}}, {key:"active", editor:"radio", editorOptions:{radioOptions:["yes","no","maybe"],disableBtns:true}}, {key:"colors", editor:"checkbox", editorOptions:{checkboxOptions:["red","yellow","blue"]}}, {key:"last_login", formatter:YAHOO.widget.DataTable.formatDate, editor:"date"} ]; this.myDataSource = new YAHOO.util.DataSource(YAHOO.example.Data.addresses); this.myDataSource.responseType = YAHOO.util.DataSource.TYPE_JSARRAY; this.myDataSource.responseSchema = { fields: ["address","city","state","amount","active","colors",{key:"last_login",parser:YAHOO.util.DataSource.parseDate}] }; this.myDataTable = new YAHOO.widget.DataTable("cellediting", myColumnDefs, this.myDataSource); // Set up editing flow this.highlightEditableCell = function(oArgs) { var elCell = oArgs.target; if(YAHOO.util.Dom.hasClass(elCell, "yui-dt-editable")) { this.highlightCell(elCell); } }; this.myDataTable.subscribe("cellMouseoverEvent", this.highlightEditableCell); this.myDataTable.subscribe("cellMouseoutEvent", this.myDataTable.onEventUnhighlightCell); this.myDataTable.subscribe("cellClickEvent", this.myDataTable.onEventShowCellEditor); // Hook into custom event to customize save-flow of "radio" editor this.myDataTable.subscribe("editorUpdateEvent", function(oArgs) { if(oArgs.editor.column.key === "active") { this.saveCellEditor(); } }); this.myDataTable.subscribe("editorBlurEvent", function(oArgs) { this.cancelCellEditor(); }); }; });

### YUI Logger Output:

Note: Logging and debugging is currently turned off for this example.

Reload with logging
and debugging enabled.

### DataTable Control (beta) Examples:

- Basic Example
- Progressive Enhancement
- Custom Cell Formatting
- Nested Headers
- JSON Data Over XHR
- XML Data Over XHR With POST
- Textual Data Over XHR
- Local XML Data
- Adding and Deleting Rows
- Client-side Pagination
- Client-side Sorting
- Server-side Pagination
- Server-side Sorting
- Server-side Pagination and Sorting, with Browser History Manager
- XY-scrolling, Y-scrolling, and X-scrolling
- Row Selection
- Cell Selection
- Inline Cell Editing
- Context Menu Integration
- Showing, Hiding, and Reordering Columns.
- Highlighting Cells, Rows, or Columns
- Complex Example of Multiple Features
- Datatable with Autocomplete
- Skinning Model
- Configuring the Paginator
- Complex Application (included with examples for Layout Manager (beta))

### More DataTable Control (beta) Resources:

- User's Guide (external)
- API Documentation
- Cheat Sheet PDF (external)

Copyright © 2008 Yahoo! Inc. All rights reserved.

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