YUI Library Home

YUI Library Examples: DataTable Control: Quick Edit

DataTable Control: Quick Edit

A demonstration of switching DataTable into Quick Edit mode. When the table first loads, it displays the normal way. When it switches to Quick Edit mode, the editable colums are filled with input fields. getQuickEditChanges() returns the changed values for efficiently saving the updates.

In Quick Edit mode, hold down the Control key and press the up or down arrow keys to move within a column.

To test validation, try entering John Lindal as the author, anything other than 4 digits for the date, and anything other than a positive integer for the quantity.

Custom CSS for this Example

DataTable Quick Edit extension code:

Also available here.

JavaScript to run this example

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.

Copyright © 2011 Yahoo! Inc. All rights reserved.

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