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>"; }; // Custom editor for city column to save input on "enter" this.editCity = function(oEditor, oSelf) { var elCell = oEditor.cell; var oRecord = oEditor.record; var oColumn = oEditor.column; var elContainer = oEditor.container; var value = oRecord.getData(oColumn.key); // Textbox var elTextbox = elContainer.appendChild(document.createElement("input")); elTextbox.type = "text"; elTextbox.style.width = (elCell.offsetWidth + 20) + "px"; elTextbox.value = value; // Set up a listener YAHOO.util.Event.addListener(elTextbox, "keyup", function(v){ // Save on "enter" if(v.keyCode === 13) { oSelf.saveCellEditor(); } // Update the tracker value else { oSelf._oCellEditor.value = elTextbox.value; } }); // Select the text elTextbox.select(); }; var myColumnDefs = [ {key:"uneditable"}, {key:"address", formatter:this.formatAddress, editor:"textarea"}, {key:"city", editor:this.editCity}, {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
- Client-side Pagination
- Client-side Sorting
- Server-side Pagination
- Server-side Sorting
- Server-side Pagination and Sorting, with Browser History Manager
- Fixed Scrolling
- Row Selection
- Cell Selection
- Inline Cell Editing
- Context Menu Integration
- Complex Example of Multiple Features
- Datatable with Autocomplete
- Skinning Model

### More DataTable Control (beta) Resources:

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

Copyright © 2007 Yahoo! Inc. All rights reserved.

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