YUI Library Home

YUI Library Examples: DataTable Control: Context Menu Integration

DataTable Control: 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.

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

Sample Code for this Example

Data:

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

CSS:

1/* No custom CSS. */ 
view plain | print | ?

Markup:

1<div id="myContainer"></div> 
view plain | print | ?

JavaScript:

1YAHOO.util.Event.addListener(window, "load", function() { 
2    YAHOO.example.ContextMenu = function() { 
3        var myColumnDefs = [ 
4            {key:"SKU", sortable:true}, 
5            {key:"Quantity", sortable:true}, 
6            {key:"Item", sortable:true}, 
7            {key:"Description"} 
8        ]; 
9 
10        var myDataSource = new YAHOO.util.DataSource(YAHOO.example.Data.inventory); 
11        myDataSource.responseType = YAHOO.util.DataSource.TYPE_JSARRAY; 
12        myDataSource.responseSchema = { 
13            fields: ["SKU","Quantity","Item","Description"] 
14        }; 
15 
16        var myDataTable = new YAHOO.widget.DataTable("myContainer", myColumnDefs, myDataSource); 
17 
18        var onContextMenuClick = function(p_sType, p_aArgs, p_myDataTable) { 
19            var task = p_aArgs[1]; 
20            if(task) { 
21                // Extract which TR element triggered the context menu 
22                var elRow = this.contextEventTarget; 
23                elRow = p_myDataTable.getTrEl(elRow); 
24 
25                if(elRow) { 
26                    switch(task.index) { 
27                        case 0:     // Delete row upon confirmation 
28                            var oRecord = p_myDataTable.getRecord(elRow); 
29                            if(confirm("Are you sure you want to delete SKU " + 
30                                    oRecord.getData("SKU") + " (" + 
31                                    oRecord.getData("Description") + ")?")) { 
32                                p_myDataTable.deleteRow(elRow); 
33                            } 
34                    } 
35                } 
36            } 
37        }; 
38 
39        var myContextMenu = new YAHOO.widget.ContextMenu("mycontextmenu", 
40                {trigger:myDataTable.getTbodyEl()}); 
41        myContextMenu.addItem("Delete Item"); 
42        // Render the ContextMenu instance to the parent container of the DataTable 
43        myContextMenu.render("myContainer"); 
44        myContextMenu.clickEvent.subscribe(onContextMenuClick, myDataTable); 
45         
46        return { 
47            oDS: myDataSource, 
48            oDT: myDataTable 
49        }; 
50    }(); 
51}); 
view plain | print | ?

YUI Logger Output:

Note: Logging and debugging is currently turned off for this example.

Reload with logging
and debugging enabled.

More DataTable Control Resources:

Copyright © 2008 Yahoo! Inc. All rights reserved.

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