This module defines an extension of View that includes a BASE Y.DataTable.BaseCellPopupEditor View class definition cell "pop-up" editor. This view class includes an editor with HTML inserted into an Overlay widget directly over the TD cell. Positioning, event management, creation/destruction and attribute changes are managed by this class.

Configuration

Y.DataTable.BaseCellPopupEditor by itself just creates an empty Overlay container, and really isn't meant to be used that way. The view class includes a number of attributes that are the key to defining a workable popup editor and it's behaviors.

The Y.DataTable.BaseCellPopupEditor View class communicates with the DataTable via the gallery-datatable-editable module, which sets up invocation and rendering of this View and establishes listeners for View events, thus the DataTable serves as a Controller.

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

View Construction / Rendering

HTML content that will be set to the Overlay's bodyContent is setup via the templateObject and it's html property. The base view class uses the YUI Template module, and specifically the Template.Micro module to build out the HTML (Handlebars format is also available). For many use cases you won't need a fancy "template", and in fact your templateObject.html may not include any "template parameters" at all -- which is perfectly fine.

Editing / Validation

This editor view creates the template'ed content, and attaches the _inputClass wherever the implementer assigns the class tag. The editor can also be configured to listen to the base view's editorCreated in order to attach or configure a Widget or another UI component within the View container.

Key listeners are provided to detect changes to the first Node within the container with _inputClass set. These keylisteners can be used 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.

If the implementer has connected a Widget to this View, the widget should be configured by it's own "selection" mechanism to either call this View's saveEditor orcancelEditor methods to ensure proper saving / closing of the Overlay.

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.

Pre-Built Popup Editors

This Module includes several pre-defined editor configurations which are stored within the Y.DataTable.EditorOptions namespace (presently there are popup editors for "textbox", "textarea", "checkbox", "radio", "dropdown", "autocomplete", "calendar", "date", "number"). New popup editors can be created and added to this namespace at runtime, and by defining the BaseViewClass:Y.DataTable.BaseCellPopupEditor property.

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.

The pre-built configuration options are stored in an Object variable Y.DataTable.EditorOptions within the DataTable namespace. The gallery-datatable-editable module uses the Y.DataTable.EditorOptions to create required editor View instances.

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

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;

   // Column definition ... disabling keyfiltering and setting a CSS class
   { key:'firstName',
     editor:"text", editorConfig:{ className:'align-right', keyFiltering:null }
   }

KNOWN ISSUES:

• In-cell key navigation with scrolling DT's can put the View out of the DT limits, no bounds checking is currently done!
• Some problems have been encountered after "datatable.destroy()" and then immediate re-building of the same DT without a page refresh.