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 Editable (gallery-datatable-editable) 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 includes a class extension to DataTable that provides wrapper support for cell editing and hopefully row editing (in the future).

The extension adds a few new attributes (specifically "editable", "defaultEditor" and "editOpenType") but the real functionality is to provide listeners to invoke an editor on the appropriate cell click/dblclick and then to listen for change events from the editor (a View) and to update the data (the Model) after editing is completed.

Currently this module supports new Column configuration parameters (defined in the DT column object) of "editor", "editorOptions", "editable".

This implementation works at present with cell editors, specifically Gallery-DataTable-Celleditor-Popup and Gallery-DataTable-Celleditor-Inline which are View class extensions that provide a number of individualized cell editor user interfaces.

The module fires one event "cellEditorSave" after the cell editor has updated the value. Implementers can write listeners to this event to send updates back to a remote source of data, if desired.

Note: This code example is intended to demonstrate the functionality of this module, specifically the new DT attributes and column properties.

To see a code example for using the various editors please see the cell editor modules Gallery-DataTable-Celleditor-Popup and Gallery-DataTable-Celleditor-Inline.

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) {
 
   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 'text' initiated by 
   //    a "click" action on a cell   
   //     
      editable: true,
      defaultEditor: 'text',
      editOpenType: 'click',
 
   }).render('#dtable');
 
   //
   //  Set a listener to DT's cell editor save event so that we can synchronize 
   //    changes with a remote server (i.e. DataSource)
   //
   dt.after('cellEditorSave', function(o){
      var msg = 'Editor: ' + o.editorName + ' saved newVal=' + o.newVal
           + ' oldVal=' + o.prevVal + ' colKey=' + o.colKey;
      Y.log(msg);
   });
 
 
});

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

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 'text' initiated by 
   //    a "click" action on a cell   
   //     
      editable: true,
      defaultEditor: 'text',
      editOpenType: 'click',

}).render('#dtable');

//
   //  Set a listener to DT's cell editor save event so that we can synchronize 
   //    changes with a remote server (i.e. DataSource)
   //
   dt.after('cellEditorSave', function(o){
      var msg = 'Editor: ' + o.editorName + ' saved newVal=' + o.newVal
           + ' oldVal=' + o.prevVal + ' colKey=' + o.colKey;
      Y.log(msg);
   });

});