Yahoo! Developer Network Home - Help

Site Search (YDN & YUIBlog):

# YUI Library Examples: DataTable Control (beta): Context Menu Integration

# DataTable Control (beta): Context Menu Integration

Right-click on a row to see the ContextMenu integration in action. For more information on using the ContextMenu class please refer to the documentation for the Menu control.

View example in new window.

## Sample Code for this Example

Data:

YAHOO.example.Data = { inventory: [ {SKU:"23-23874", Quantity:43, Item:"Helmet", Description:"Red baseball helmet. Size: Large."}, {SKU:"48-38835", Quantity:84, Item:"Football", Description:"Leather football."}, {SKU:"84-84848", Quantity:31, Item:"Goggles", Description:"Light blue swim goggles"}, {SKU:"84-84843", Quantity:56, Item:"Badminton Set", Description:"Set of 2 badminton rackets, net, and 3 birdies."}, {SKU:"84-39321", Quantity:128, Item:"Tennis Balls", Description:"Canister of 3 tennis balls."}, {SKU:"39-48949", Quantity:55, Item:"Snowboard", Description:""}, {SKU:"99-28128", Quantity:77, Item:"Cleats", Description:"Soccer cleats. Size: 10."}, {SKU:"83-48281", Quantity:65, Item:"Volleyball", Description:""}, {SKU:"89-32811", Quantity:12, Item:"Sweatband", Description:"Blue sweatband. Size: Medium."}, {SKU:"28-22847", Quantity:43, Item:"Golf Set", Description:"Set of 9 golf clubs and bag."}, {SKU:"38-38281", Quantity:1, Item:"Basketball Shorts", Description:"Green basketball shorts. Size: Small."}, {SKU:"82-38333", Quantity:288, Item:"Lip balm", Description:"Lip balm. Flavor: Cherry."}, {SKU:"21-38485", Quantity:177, Item:"Ping Pong Ball", Description:""}, {SKU:"83-38285", Quantity:87, Item:"Hockey Puck", Description:"Glow-in-the-dark hockey puck."} ] }

CSS:

/* No custom CSS. */

Markup:

<div id="myContainer"></div>

JavaScript:

YAHOO.util.Event.addListener(window, "load", function() { YAHOO.example.ContextMenu = new function() { var myColumnDefs = [ {key:"SKU", sortable:true}, {key:"Quantity", sortable:true}, {key:"Item", sortable:true}, {key:"Description"} ]; this.myDataSource = new YAHOO.util.DataSource(YAHOO.example.Data.inventory); this.myDataSource.responseType = YAHOO.util.DataSource.TYPE_JSARRAY; this.myDataSource.responseSchema = { fields: ["SKU","Quantity","Item","Description"] }; this.myDataTable = new YAHOO.widget.DataTable("myContainer", myColumnDefs, this.myDataSource); this.onContextMenuClick = function(p_sType, p_aArgs, p_myDataTable) { var task = p_aArgs[1]; if(task) { // Extract which TR element triggered the context menu var elRow = this.contextEventTarget; elRow = p_myDataTable.getTrEl(elRow); if(elRow) { switch(task.index) { case 0: // Delete row upon confirmation var oRecord = p_myDataTable.getRecord(elRow); if(confirm("Are you sure you want to delete SKU " + oRecord.getData("SKU") + " (" + oRecord.getData("Description") + ")?")) { p_myDataTable.deleteRow(elRow); } } } } }; this.myContextMenu = new YAHOO.widget.ContextMenu("mycontextmenu", {trigger:this.myDataTable.getTbodyEl()}); this.myContextMenu.addItem("Delete Item"); // Render the ContextMenu instance to the parent container of the DataTable this.myContextMenu.render("myContainer"); this.myContextMenu.clickEvent.subscribe(this.onContextMenuClick, this.myDataTable); }; });

### YUI Logger Output:

Note: You are viewing this example in debug mode with logging enabled. This can significantly slow performance.

Reload with logging
and debugging disabled.

### DataTable Control (beta) Examples:

- Basic Example
- Progressive Enhancement
- Custom Cell Formatting
- Conditional row coloring
- Nested Headers
- JSON Data Over XHR
- XML Data Over XHR With POST
- Textual Data Over XHR
- Local XML Data
- Adding and Deleting Rows
- Client-side Pagination
- Client-side Sorting
- Server-side Pagination
- Server-side Sorting
- Server-side Pagination and Sorting, with Browser History Manager
- XY-scrolling, Y-scrolling, and X-scrolling
- Row Selection
- Cell Selection
- Inline Cell Editing
- Context Menu Integration
- Showing, Hiding, and Reordering Columns.
- Highlighting Cells, Rows, or Columns
- Complex Example of Multiple Features
- Datatable with Autocomplete
- Skinning Model
- Configuring the Paginator
- Complex Application (included with examples for Layout Manager (beta))

### More DataTable Control (beta) Resources:

- User's Guide (external)
- API Documentation
- Cheat Sheet PDF (external)

Copyright © 2008 Yahoo! Inc. All rights reserved.

Privacy Policy - Terms of Service - Copyright Policy - Job Openings