Gallery

Modules

Documentation

Context Navigation

YUI Library is not responsible for bugs or support with this module. It is available as a free service. For support please contact the module owner with the provided links.

DataTable Inline Cell Editing (gallery-datatable-celleditor-inline) on cdn

Last Updated: 01/29/13

+ 0 -

Todd Smith

YUI Contributor

See 13 more by this user.

Created: 12/28/12
Last CDN Push: 01/16/13
Build Tag: gallery-2013.01.16-21-05
Project: YUI 3
License: YUI BSD
YUI Version: 3.8.1
Free for use.

This module defines a View class extension Y.DataTable.BaseCellInlineEditor to permit inline editing (i.e. similar to a spreadsheet) within a DataTable TD cell. It uses a View component whose container is resized and positioned exactly over the TD cell to allow simple keyboard interaction to make the editing changes.

(See the image below, with an autcomplete capability added .. a little difficult to show in an image, please see the Example below)

The view is defined as a simple base view, that is highly configurable to pre-process the value prior to editing, and to postprocess (and validate) the changed data after editing and prior to saving back to the DataTable.

Capability is provided to use keyboard navigation to move from cell to cell, using CTRL-arrow key inputs.

The current inline-editors provided include;

'inline' - a simple text INPUT
'inlineNumber' - same as the inline view but converting to numeric format on save
'inlineDate' - converts a Date object for editing, then converts back to proper format on saving
'inlineAC' - provides an AutoComplete plugged into the editing INPUT

Different editor appearance and behaviors (i.e. User Interface) can be achieved by modifying the attributes of the Y.DataTable.BaseCellInlineEditor class (easier to do than it sounds!). Additionally, the user can specify "editorConfig" parameters in their DT Column definitions that are mixed-in with the named "editor" to pass configs to the View class construction.

These views are configured to work with the module Gallery-Datatable-Editable which is a DataTable class extension that supports editing, defining column editors and saving changes back to the DT.

This cell editor is functionally similar to the Datatable-Celleditor-Popup. Both of these cell editors are compatible and can be used together on the same DataTable.

(A little reluctant to write a long-winded description here as the upcoming new gallery system will require re-doing this!)

Code Sample

<script src="http://yui.yahooapis.com/3.8.1/build/yui/yui-min.js"></script>

YUI({
    //Last Gallery Build of this module
    gallery: 'gallery-2013.01.16-21-05'
}).use( 'gallery-datatable-celleditor-inline', function(Y) {
  /** 
   * Create a datatable that enables inline ("spreadsheet-type") editing of the cells.
   *
   * Make the first column ('sid') non-editable, all other columns are editable.
   *
   * A defaultEditor of 'inline' will be applied to columns 'sname' and 'sdesc' since 
   * they are editable (i.e. no editable:false) and no editor is named.
   **/
   var dt = new Y.DataTable({
       columns: [
         { key:'sid',    label:"sID", editable:false },
         { key:'sname', label:"Item Name" },
         { key:'sdesc',  label:"Item Description" },
         { key:'sprice', label:"Retail Price", editor:"inlineNumber" },
         { key:'sdate',  label:"Trans Date", editor:"inlineDate" }
      ],
      data: someData,
 
    //
    //  Set DT as editable with a default editor of 'inline' initiated by 
    //    a "dblclick" action on a cell   
    //
      editable:      true,
      defaultEditor: 'inline',
      editOpenType:  'dblclick'
 
   }).render('#dtable');
 
 
});

YUI({
    //Last Gallery Build of this module
    gallery: 'gallery-2013.01.16-21-05'
}).use( 'gallery-datatable-celleditor-inline', function(Y) {
  /** 
   * Create a datatable that enables inline ("spreadsheet-type") editing of the cells.
   *
   * Make the first column ('sid') non-editable, all other columns are editable.
   *
   * A defaultEditor of 'inline' will be applied to columns 'sname' and 'sdesc' since 
   * they are editable (i.e. no editable:false) and no editor is named.
   **/
   var dt = new Y.DataTable({
       columns: [
         { key:'sid',    label:"sID", editable:false },
         { key:'sname', label:"Item Name" },
         { key:'sdesc',  label:"Item Description" },
         { key:'sprice', label:"Retail Price", editor:"inlineNumber" },
         { key:'sdate',  label:"Trans Date", editor:"inlineDate" }
      ],
      data: someData,
 
    //
    //  Set DT as editable with a default editor of 'inline' initiated by 
    //    a "dblclick" action on a cell   
    //
      editable:      true,
      defaultEditor: 'inline',
      editOpenType:  'dblclick'
 
   }).render('#dtable');

});