DataTable Widget :: Inline Editing

Sample Code

CSS:

/* custom css*/ #editing {margin:1em;} #editing table {border-collapse:collapse;} #editing th, #editing td {border:1px solid #000;padding:.25em;} #editing th {background-color:#696969;color:#fff;}/*dark gray*/ #editing .yui-dt-odd {background-color:#eee;} /*light gray*/ #editing .yui-dt-editable.yui-dt-highlight {background-color:#BEDAFF;} /*light blue*/

Markup:

<div id="editing"></div>

JavaScript:

var myColumnHeaders = [ {key:"SKU"}, {key:"Quantity",editor:"textbox"}, {key:"Item",editor:"textbox"}, {key:"Description",editor:"textarea"} ]; var myColumnSet = new YAHOO.widget.ColumnSet(myColumnHeaders); var myDataSource = new YAHOO.util.DataSource(YAHOO.example.Data.inventory); myDataSource.responseType = YAHOO.util.DataSource.TYPE_JSARRAY; myDataSource.responseSchema = { fields: ["SKU","Quantity","Item","Description"] }; var myDataTable = new YAHOO.widget.DataTable("editing", myColumnSet, myDataSource,{caption:"Example: Inline Editing"}); myDataTable.subscribe("cellClickEvent",myDataTable.onEventEditCell); myDataTable.subscribe("cellMouseoverEvent",myDataTable.onEventHighlightCell); myDataTable.subscribe("cellMouseoutEvent",myDataTable.onEventUnhighlightCell); var onCellEdit = function(oArgs) { YAHOO.log("Cell \"" + oArgs.target.id + "\" was updated from \"" + oArgs.oldData + "\" to \"" + oArgs.newData + "\"", "info", this.toString()); } myDataTable.subscribe("cellEditEvent",onCellEdit);