Yahoo! UI Library

The QuickEditDataTable class extends the DataTable class to provide QuickEdit mode. (It could just as easily extend ScrollingDataTable.) QuickEdit mode allows the user to edit all the values that are visible in the table, controlled by the column configuration. Each editable cell contains an input field. If the user decides to save the changes, then you can extract the changes by calling getQuickEditChanges().

For a column to be editable in QuickEdit mode, the column configuration must include quickEdit. The contents of this object define the column's behavior in QuickEdit mode.

If a column should not be editable, but needs to be formatted differently in QuickEdit mode, then you must define qeFormatter in the column configuration. This is simply a normal cell formatter function that will be used in QuickEdit mode. The static functions readonly*QuickEditFormatter provide examples.

The following configuration can be provided as part of quickEdit:

copyDown

If true, the top cell in the column will have a button to copy the value down to the rest of the rows.

formatter

The cell formatter which will render an appropriate form field: <input type="text">, <textarea>, or <select>.

validation

Validation configuration for every field in the column.

The following configuration can be provided as part of quickEdit.validation:

css

CSS classes encoding basic validation rules:

yiv-required

Value must not be empty.

yiv-length:[x,y]

String must be at least x characters and at most y characters. At least one of x and y must be specified.

yiv-integer:[x,y]

The integer value must be at least x and at most y. x and y are both optional.

yiv-decimal:[x,y]

The decimal value must be at least x and at most y. Exponents are not allowed. x and y are both optional.

fn

A function that will be called with the DataTable as its scope and the cell's form element as the argument. Return true if the value is valid. Otherwise, call this.displayQuickEditMessage(...) to display an error and return false.

msg

A map of types to messages that will be displayed when a basic or regex validation rule fails. The valid types are: required, min_length, max_length, integer, decimal, and regex. There is no default for type regex, so you must specify a message if you configure a regex validation.

regex

Regular expression that the value must satisfy in order to be considered valid.

Custom QuickEdit Formatters

To write a custom cell formatter for QuickEdit mode, you must structure the function as follows:

function myQuickEditFormatter(el, oRecord, oColumn, oData) {
  var markup =
    '<input type="text" class="{yiv} yui-quick-edit yui-quick-edit-key:{key}"/>' +
    YAHOO.widget.QuickEditDataTable.MARKUP_QE_ERROR_DISPLAY;
    el.innerHTML = lang.substitute(markup, {
      key: oColumn.key,
      yiv: oColumn.quickEdit.validation ? (oColumn.quickEdit.validation.css || '') : ''
    });
    el.firstChild.value = extractMyEditableValue(oData);
    YAHOO.widget.QuickEditDataTable.copyDownFormatter.apply(this, arguments);
};

You can use textarea or select instead of input, but you can only create a single field.

extractMyEditableValue does not have to be a separate function nor must it be limited to using only oData. The work should normally be done inline in the formatter function, but the name of the sample function makes the point clear.