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 Popup Cell Editing (gallery-datatable-celleditor-popup) 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.

Provides a View class extension Y.DataTable.BaseCellPopupEditor to allow for popup visual UI elements to serve as cell editors for DataTable within an Overlay over the TD cell.
(See simple radio group editor on image below)

The "base" View is highly configurable and can be customized to create a variety of editor views. This module includes the following pre-built popup editor types;
textbox, textarea, checkbox, radio group, select (a.k.a. as dropdown or combobox), number, date, calendar (including connected Calendar widget), autocomplete

Different editor appearance and behaviors (i.e. User Interface) can be achieved by modifying the attributes of the Y.DataTable.BaseCellPopupEditor 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.

See table below for visual examples of the popup editor UI's that are pre-built and included with this module;

Popup Editor	Example Image
text
textarea
checkbox
radio
select / dropdown / combobox
date
calendar
autocomplete

There are many, many configuration options ("editorConfig") that can be used in conjunction with these cell editors, please refer to the Documentation (coming soon!) for reference.

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-Inline editors. Both of these cell editors are compatible and can be used together on the same DataTable.

NOTES: This module was just pushed and is available via the Gallery CDN (see below). A few known issues so far;

This only works with the originally defined DT columns, if you change a column or add/remove it won't work correctly.
It works with scrolling DT's - both vertical and horizontal, but key navigation on scrollable is wonky.

(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-popup', function(Y) {
 
  //
  // Define some Arrays and Object Hashes that may be used by some of the editors ...
  //
  var stypes = [
     {value:0,  text:'Standard'},
     {value:10, text:'Improved'},
     {value:20, text:'Deluxe'},
     {value:30, text:'Better'},
     {value:40, text:'Subpar'},
     {value:50, text:'Junk'}
  ],
  stock = { 0:'No ', 1:'Yes ', 2:'B/O ' };
 
  // 
  //   Create a datatable that enables editing of the cells (via DT attribute editable:true) and set 
  //   the popup "text" editor as the defaultEditor.
  //
  //   Make the first column ('sid') non-editable, all other columns are editable via the columns' 
  //    "editor:" attribute, or if none is specified, "text" is the default on the entire table.
  //
 
   var dt = new Y.DataTable({
       columns: [
           { key:'sid',    label:"sID", editable:false },
           { key:'sopen',  label:"Open?",
             editor:"checkbox", 
             editorConfig:{ 
                  checkboxHash:{ 'true':1, 'false':0 } 
              }
            },
           { key:'sname',  label:"Item Name",
             editor:"text", editorConfig:{ offsetXY: [5,5] }
           },
           { key:'sdesc',  label:"Description",  editor:"textarea" },
           { key:'stype',  label:"Condition",
             editor:"select", editorConfig:{ selectOptions:stypes }
           },
           { key:'stock',  label:"In Stock?",
             editor:"radio",
             editorConfig:{ radioOptions:stock }
           },
           { key:'sprice', label:"Retail Price", editor:"number" },
           { key:'sdate',  label:"Trans Date", editor:"calendar" }
      ],
 
      data: someData,
 
    //
    //  Set DT as editable with a default editor of 'inline' initiated by 
    //    a "dblclick" action on a cell   
    //
      editable: true,
      defaultEditor: 'text',
      editOpenType: 'click',
 
   }).render('#dtable');
 
 
});

YUI({
    //Last Gallery Build of this module
    gallery: 'gallery-2013.01.16-21-05'
}).use( 'gallery-datatable-celleditor-popup', function(Y) {

//
  // Define some Arrays and Object Hashes that may be used by some of the editors ...
  //
  var stypes = [
     {value:0,  text:'Standard'},
     {value:10, text:'Improved'},
     {value:20, text:'Deluxe'},
     {value:30, text:'Better'},
     {value:40, text:'Subpar'},
     {value:50, text:'Junk'}
  ],
  stock = { 0:'No ', 1:'Yes ', 2:'B/O ' };

// 
  //   Create a datatable that enables editing of the cells (via DT attribute editable:true) and set 
  //   the popup "text" editor as the defaultEditor.
  //
  //   Make the first column ('sid') non-editable, all other columns are editable via the columns' 
  //    "editor:" attribute, or if none is specified, "text" is the default on the entire table.
  //

var dt = new Y.DataTable({
       columns: [
           { key:'sid',    label:"sID", editable:false },
           { key:'sopen',  label:"Open?",
             editor:"checkbox", 
             editorConfig:{ 
                  checkboxHash:{ 'true':1, 'false':0 } 
              }
            },
           { key:'sname',  label:"Item Name",
             editor:"text", editorConfig:{ offsetXY: [5,5] }
           },
           { key:'sdesc',  label:"Description",  editor:"textarea" },
           { key:'stype',  label:"Condition",
             editor:"select", editorConfig:{ selectOptions:stypes }
           },
           { key:'stock',  label:"In Stock?",
             editor:"radio",
             editorConfig:{ radioOptions:stock }
           },
           { key:'sprice', label:"Retail Price", editor:"number" },
           { key:'sdate',  label:"Trans Date", editor:"calendar" }
      ],

data: someData,

//
    //  Set DT as editable with a default editor of 'inline' initiated by 
    //    a "dblclick" action on a cell   
    //
      editable: true,
      defaultEditor: 'text',
      editOpenType: 'click',

}).render('#dtable');

});