API Docs for:
Show:

gallery-datatable-celleditor-inline Module

Available since 3.8.0

A View class that serves as the BASE View class for a TD Cell "inline" editor, i.e. an editor that is a single INPUT node that completely overlies the TD cell. This editor is intended to replicate the familiar "spreadsheet" type of input.

Editing / Validation

This editor view creates a simple INPUT[type=text] control and repositions and resizes it to match the underlying TD, set with a z-Index to visually appear over the TD cell.

Key listeners are provided to detect changes, prohibit invalid keystrokes (via the keyFiltering setting) and to allow validation upon a "save" entry (keyboard RTN stroke) where a validator can be prescribed to allow/disallow changes based upon the overall "value" of the INPUT control.

Navigation

The editor provides the capability to navigate from TD cell via key listeners on the following key combinations; * CTRL-arrow keys * TAB goes to RIGHT, SHIFT-TAB goes to left * ESC cancels editing * RTN saves cell

Key navigation can be disabled via the inputKeys attribute set to false.

When a "key navigation" request is received it is passed to the keyDir as a change in [row,col] that implementers can listen to "change" events on, to reposition and open editing on the new relative cell. (NOTE: This view does not reposition, it simply fires a keyDirChange event.

Events

Several events are fired by this View; which can be listened for and acted upon to achieve differing results. For example, the Y.DataTable.EditorOptions.inlineAC (inline autocompletion editor) listens for the editorCreated event and once received, it configures the autocomplete plugin onto the INPUT node.

Configuration

Ths Y.DataTable.BaseCellInlineEditor editor is intended to be configured by varying the configuration parameters (i.e. attribute and related configuration) to permit a variety of editing features.

Since the View class permits ad-hoc attributes, the implementer can pass many properties in during instantiation that will become available as run-time View attributes.

This Module includes several pre-defined editor configurations which are stored within the Y.DataTable.EditorOptions namespace (presently there are "inline", "inlineNumber", "inlineDate", "inlineAC"). New inline editors can be created and added to this namespace at runtime, and by defining the BaseViewClass:Y.DataTable.BaseCellInlineEditor property.

For example, the pre-built configuration object for the inlineDate inline editor is stored as Y.DataTable.EditorOptions.inlineDate.

To configure an editor on-the-fly (i.e. within a DataTable column definition) just include the configuration object options within DT's column editorConfig object, which is Y.merge'ed with the pre-built configs;

   // define an 'inlineDate' editor with additional configs ...
   { key:'date_of_claim', editor:"inlineDate", editorConfig:{ dateformat:'%Y-%m-%d'} }

This Y.DataTable.BaseCellinlineEditor class is similar to (and compatible with ) the Y.DataTable.BaseCellPopupEditor in another gallery module. Note that since the "inline" editor uses a simple INPUT[type=text] Node instead of an Overlay the codeline is quite a bit simpler.

KNOWN ISSUES:

  • This View doesn't work well with scrolling DT's, so I've disabled it currently.
  • Sometimes after a DT's editable ATTR is toggled true/false a "cannot read 'style'" message occurs and editing failes requiring a page refresh.