Rightclick-on-a-row-to-see-the-ContextMenu-integration-in-action

YUI Library JavaScript DHTML


            



    
Context Menu Integration

/*margin and padding on body element
  can introduce errors in determining
  element position and are not recommended;
  we turn them off as a foundation for YUI
  CSS treatments. */
body {
  margin:0;
  padding:0;
}












div.yuimenu .bd {
    zoom: normal;
}




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.

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_2.7.0b.zip( 4,431 k)