gallery-datatable-editable Module
A DataTable class extension that configures a DT for "editing", current deployment supports cell editing (and planned near-term support for row editing).
This module is essentially a base wrapper-class to setup DT for editing with the appropriate attributes and listener creation / detachment. The real guts of "datatable-editing" is in the View class definitions, within the gallery-datatable-celleditor-inline and gallery-datatable-celleditor-inline modules (and possibly future editor View class modules).
Functionality
The module is basically intended to keep track of the editing state (via editable attribute) and housekeeping functions with regard to managing editor View instance creation, rendering and destruction.
By design this module attempts to group common editor View instances wherever possible. So for a DT with 14 columns
all set with "inline" View classes only 1 View instance is created.
Likewise if a DT uses 4 different "calendar" editor View types but each one as slightly different "editorConfig",
then this module creates 4 different calendar View instances to handle the different configurations.
Listeners are set for the "cellEditorSave" event and saved to the active "data" setting within this module.
Additional capability is provided for cell editing situations to add CSS classes to TD's which are added to "editable" columns (e.g. cursor) to indicate they are "clickable".
This module works sortable, scrollable (y-scrolling currently) to make changes to the client-side of the DT model (remote updates should be provided via ModelList sync or user-defined listeners.)
Attributes
Presently three attributes are provided; editable, editOpenType and defaultEditor.
The primary ATTR is the editable, which is used to toggle on/off the editing state of the DT instance.
The defaultEditor attribute is used to setup a cell editor View instance to be used on all editable columns that don't already have an editor assigned.
Column Properties
In addition to a few new attributes the module also recognizes some new column properties in order to support cell-editing in particular;
editable | {Boolean} | Flag to indicate if column is editable (set editable:false to exclude an
individual column) |
---|---|---|
editor | {String} | Name of the defined Y.DataTable.EditorOptions View configuration for this column. |
editorConfig | {Object} | Passed to the View editor class when instantiated, and Y.merge'ed in to become View class attributes. |
When this module is loaded and the "editable:true" attribute is set, it attempts to economize on the "instantiation cost" of creating View instances by identifying only editor Views that are required based upon column definitions and/or the defaultEditor attribute. (e.g. if all columns are "text" editors, only one "text" editor View is instantiated)
... More Info
The module fires the event cellEditorSave, which can be listened for to provide updating of remote data back to a server (assuming a ModelList "sync" layer is NOT used). Haven't provided the equivalent to YUI 2.x's "asyncSubmitter" because I think this event could easily be listened to in order to provide follow-on updating to remote data stores.
A new class Object (Y.DataTable.EditorOptions) is added to the DataTable namespace that serves as the datastore of the editor View configuration properties. Each "key" (object property) within this object is an entrypoint to a specific editor configuration, which are defined in the separate View class extensions (presently gallery-datatable-celleditor-inline and gallery-datatable-celleditor-popup. Please see those for specifics.)
KNOWN ISSUES:
- Works minimally with "y" scrolling, "x" scrolling still needs work.
- Initial editor invocation is limited to "mouse" actions on TD only (although keyboard navigation cell-to-cell is available).
FUTURE:
This module will be amended to add support for "row" editing, if required.
This module provides the following classes: