Right Click revisited

The below works for me in ie6 (and ff). It was a 15 minute proof of concept to see how one could identify the current cell from a right-click, select it and set options in a context menu so as to make a right click usefull. This is basically glued bits of code from dymanic drive and this forum

var table = new Active.XML.Table;

var grid = new Active.Controls.Grid;

Active.Templates.Text.prototype.setEvent("oncontextmenu", oncontextmenu);

    //	create data formats

    var string = new Active.Formats.String;

    //	create ActiveWidgets data model - XML-based table

    //	provide data URL

    table.setURL("://server/xml?");

    //set rows XPath

    table.setRows("//securities/*");

    //set columns XPath

    table.setColumns(["name","symbol", "currency", "priceDateRange"]);

    //set column formatting

    table.setFormats([string, string, null, string]);

    //start asyncronous data retrieval

    table.request();

    //define column labels

    var columns = ["Company Name", "Sym", "Curr", "Data Range"];

    //provide column labels

    grid.setColumnProperty("texts", columns);



    grid.setAction("contextmenu", function(src){doGridContextMenu(src);});    

    grid.setEvent("oncontextmenu", oncontextmenu);

    grid.setRowHeaderWidth("0px");    

    document.write(grid);



var rightedge=0;

var bottomedge=0;





//we get the event here so grab the xy of the cursor

function oncontextmenu(e){

    //disable the browser menu

   e.cancelBubble = true;

   e.returnValue = false;



   //Call the grid contextmenu handler so we can 

   //get cell specific stuff with the src arg

   this.action("contextmenu");

   

   //Grab the hidden menu

   var menuobj=document.getElementById("ctxMenu")

   rightedge=ie5? document.body.clientWidth-event.clientX : window.innerWidth-e.clientX

   bottomedge=ie5? document.body.clientHeight-event.clientY : window.innerHeight-e.clientY

   

    if (rightedge<menuobj.offsetWidth)

        //move the horizontal position of the menu to the left by it's width

        menuobj.style.left=ie5? document.body.scrollLeft+event.clientX-menuobj.offsetWidth : window.pageXOffset+e.clientX-menuobj.offsetWidth

    else

        //position the horizontal position of the menu where the mouse was clicked

        menuobj.style.left=ie5? document.body.scrollLeft+event.clientX : window.pageXOffset+e.clientX

    //same concept with the vertical position

    if (bottomedge<menuobj.offsetHeight)

        menuobj.style.top=ie5? document.body.scrollTop+event.clientY-menuobj.offsetHeight : window.pageYOffset+e.clientY-menuobj.offsetHeight

    else

        menuobj.style.top=ie5? document.body.scrollTop+event.clientY : window.pageYOffset+e.clientY



    //after determining the position, show context menu

    menuobj.style.visibility="visible"   

}    

    

//simple way to hide the context menu

function hideMyMenu(){

    document.getElementById('myMenu').style.display = 'none';

}    



function doGridContextMenu(src){

  setContext(src.getProperty("item/text") + " " + src.getProperty("item/index"));

  grid.setProperty("selection/index", src.getProperty("item/index"));

  var menuobj=document.getElementById("ctxMenu")

  //menuobj.??? set a key, add a submenu etc... src.getProperty("item/text")

}

Forum search