
TableKit.Editable
Activation

Once the table is initialised, a mouse click on a table body cell, will activate a HTML form allowing the user to edit the new value via a Prototype Ajax.Updater.
API

You can initialise a specific table by using:

TableKit.Editable.init(table, {options});

where table is a table element reference or ID and options are options matching the TableKit global options, you wish to apply to this table only.

To edit a specific table cell (for example if you want to use an external control) you can call the edit function manually.

TableKit.Editable.editCell(table, index, cindex);

    * table = null or a table reference or a table ID, if table is null then index must equal a cell element reference or a cell ID
    * index = a number or element reference or ID: if index is a number, then it must be the row index number, table cannot be null and cindex must be supplied too. If it is not a number then it is treated as the cell element reference.
    * cindex = a number (the cell index)

Cell Editors

A collection of TableKit.Editable.CellEditor objects handles cell editing. Each CellEditor has a name and this name is matched to the id or class name of the column header cell to find the appropriate editor, otherwise a standard text input is used.

Adding cell editors is easy:

TableKit.Editable.textInput(name,attributes); // creates a standard text input (the default)
TableKit.Editable.multiLineInput(name,attributes); // creates a text area
TableKit.Editable.selectInput(name,attributes,selectOptions); // creates a select element

    * name: the name to associate this editor with a table column
    * attributes: HTML attributes to apply to the input element
    * selectOptions: an array of options for the select element, e.g. [['text', 'value'],['option 1', '1'],['option 2', '2']]

The demo is setup this way:

TableKit.Editable.selectInput('urgency', {}, [
			['1','1'],
			['2','2'],
			['3','3'],
			['4','4'],
			['5','5']																												
		]);
TableKit.Editable.multiLineInput('title');

The demo has a select editor for the Urgency column and a textarea for the Title column.
Updating the Cell

Each cell editor uses a Prototype Ajax Updater. The POST body is generated from the following:

'&row=n&cell=n&id=id&field=field&value=xxxxxx'

    * &row=n: The row index of the edited cell
    * &cell=n: The cell index of the edited cell
    * &id=id: The id attribute of the row, it may be useful to set this to the record ID you are editing
    * &field=field: The id attribute of the header cell of the column of the edited cell, it may be useful to set this to the field name you are editing
    * &value=xxxxxx: The rest of the POST body is the serialised form. The default name of the field is 'value'.

This information is POSTed to the URI specified in TableKit.options.editAjaxURI by default. If you initialise a table with options you can specify a different URI for each table. You can also specify a different URI in custom cell editors (see below)

Similarly the Ajax Updater uses the options from TableKit.options.editAjaxOptions
Custom Cell Editors

To make your own cell editor simply make a new TableKit.Editable.CellEditor object and add it to the collection using the TableKit.Editable.addCellEditor function. For example:

TableKit.Editable.addCellEditor(
	new TableKit.Editable.CellEditor('yourname', {
		element : 'select',
		attributes : {name : 'favourite_food', title : 'Please select your favourite food from the list'},
		selectOptions : [['Cheese','Cheese'],['Llama','Llama'],['Staot','Staot'],['Halibut','Halibut']]
	})
);

The available options are:

    * Option : Default
    * element : 'input': the HTML element used for the form
    * attributes : {name : 'value', type : 'text'}: the attributes to apply to the element
    * selectOptions : []: if the element is a select, these are the options
    * showSubmit : true: show a sumit button
    * submitText : 'OK': the text on the submit button
    * showCancel : true: show a cancel link
    * cancelText : 'Cancel': the text of the cancel link
    * ajaxURI : null: the URI the form body is POSTed to for this editor only
    * ajaxOptions : null: the options for the Prototype Ajax Updater object for this editor only

Custom Cell Editor Objects

Of course you can write your own cell editor objects from scratch. A cell editor object is really just an object with one property name and one method edit

customEditorObject = function(name) {
	this.name = name;
}
customEditorObject.prototype.edit = function(cell){ //do something }

The edit function is called when a body cell is clicked on. The function should handle setting up the form and handling the submit event. It can be added to the collection using the standard TableKit.Editable.addCellEditor function
