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 ContextMenu (gallery-datatable-contextmenu) on cdn

Last Updated: 01/29/13

+ 0 -

Todd Smith

YUI Contributor

See 13 more by this user.

Created: 01/14/13
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 Plugin that uses the Gallery-ContextMenu-View to create an easy "right-click"-type menu to use with DataTable.

It includes the capability to define different context menus for the THEAD, TBODY or TFOOT elements of a DataTable.

The plugin fires events that can be listened to that include references to the TR or TD (or TH) Node that the context menu was opened on in addition to the menu selection that was made.

NOTE: This is basically a helper method to assist in making a Gallery-ContextMenu-View contextmenu on a DataTable without having to mess with "delegate", etc ... it does that for you. For more info, see the Gallery-ContextMenu-View page/docs/api.

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('datatable', 'gallery-datatable-contextmenu', function(Y) {
 
//
//  Create the DataTable
//
    var dt = new Y.DataTable({
        columns: [ 'rid', 'rtext', 'rnum' ],
        data:    myData,
        sortable: true,
    });
    dt.render('#tablediv');
 
//
//  Setup a context-menu on the TBODY
//
dt.plug(Y.Plugin.DataTableContextMenu,{
  tbodyMenu:{
    menuItems: [
      {label:"Edit",  value:"e" },
      {label:"Update", value:"u"},
      {label:"Insert Before", value:"i"},
      {label:"Insert After",  value:"a"},
      {label:"Delete Record", value:"d"}
    ],
    after:{
      'selectedMenuChange': tdMenuChange
    }
  },
 
  theadMenu:{
     menuItems:  [ "Sort A-Z",  "Sort Z-A",  "Hide" ],
     after: {
       'selectedMenuChange': thMenuSelect
     }
  }
});
 
 
//
//  Listeners for selectedMenuChange events (thMenuSelect similar)
//
function tdMenuChange(e){
   //  Original clicked TD ... this.get('contextTarget')
   //  Selected menu item;
   //        e.newVal.menuItem   ... from the "menuItems" ATTR
   //        e.newVal.menuIndex ... index within the "menuItems" ATTR
};
 
 
 
});

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

//
//  Create the DataTable
//
    var dt = new Y.DataTable({
        columns: [ 'rid', 'rtext', 'rnum' ],
        data:    myData,
        sortable: true,
    });
    dt.render('#tablediv');

//
//  Setup a context-menu on the TBODY
//
dt.plug(Y.Plugin.DataTableContextMenu,{
  tbodyMenu:{
    menuItems: [
      {label:"Edit",  value:"e" },
      {label:"Update", value:"u"},
      {label:"Insert Before", value:"i"},
      {label:"Insert After",  value:"a"},
      {label:"Delete Record", value:"d"}
    ],
    after:{
      'selectedMenuChange': tdMenuChange
    }
  },

theadMenu:{
     menuItems:  [ "Sort A-Z",  "Sort Z-A",  "Hide" ],
     after: {
       'selectedMenuChange': thMenuSelect
     }
  }
});

//
//  Listeners for selectedMenuChange events (thMenuSelect similar)
//
function tdMenuChange(e){
   //  Original clicked TD ... this.get('contextTarget')
   //  Selected menu item;
   //        e.newVal.menuItem   ... from the "menuItems" ATTR
   //        e.newVal.menuIndex ... index within the "menuItems" ATTR
};

});