YUI Library Examples: DataTable Control: Context Menu Integration

Sample Code for this Example

Data:


1	YAHOO.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 \| ?

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:


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

Markup:


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

JavaScript:


1	YAHOO.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 \| ?

YAHOO.util.Event.addListener(window, "load", function() {
    YAHOO.example.ContextMenu = function() {
        var myColumnDefs = [
            {key:"SKU", sortable:true},
            {key:"Quantity", sortable:true},
            {key:"Item", sortable:true},
            {key:"Description"}
        ];

var myDataSource = new YAHOO.util.DataSource(YAHOO.example.Data.inventory);
        myDataSource.responseType = YAHOO.util.DataSource.TYPE_JSARRAY;
        myDataSource.responseSchema = {
            fields: ["SKU","Quantity","Item","Description"]
        };

var myDataTable = new YAHOO.widget.DataTable("myContainer", myColumnDefs, myDataSource);

var 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);
                            }
                    }
                }
            }
        };

var myContextMenu = new YAHOO.widget.ContextMenu("mycontextmenu",
                {trigger:myDataTable.getTbodyEl()});
        myContextMenu.addItem("Delete Item");
        // Render the ContextMenu instance to the parent container of the DataTable
        myContextMenu.render("myContainer");
        myContextMenu.clickEvent.subscribe(onContextMenuClick, myDataTable);
        
        return {
            oDS: myDataSource,
            oDT: 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 Examples:

More DataTable Control Resources:

All YUI 2.x users should review the YUI 2.8.2 security bulletin, which discusses a vulnerability present in YUI 2.4.0-2.8.1.