Enabling editing

The DataTable control has an inline-editing feature, which allows the user to click on any cell that has editing enabled and modify its value. This updates the underlying DataSource which can then be retrieved and stored.

Getting ready

Open the datatable.js file for editing. We will add some extra properties to the column definition, and also subscribe to the DataTable's cellClickEvent.

How to do it...

Modify the columns definition by adding the new editor property:

var columns = [
{
key: "chapter",
label: "Chapter No.",
formatter: "number",
sortable: true,
editor: new YAHOO.widget.TextboxCellEditor ({ validator: YAHOO.widget.DataTable.validateNumber } ),
},
{
key: "title",
label: "Title",
formatter: "string",
sortable: true,
editor: new YAHOO.widget.TextboxCellEditor(),
}
];

Next, we must enable editing by subscribing to the cellClickEvent. Add the following code after the definition of dataTable, as follows:

dataTable.subscribe("cellClickEvent", dataTable.onEventShowCellEditor...