Prevent browser default on header right-click

Hi,

http://foxincloud.com/tutotest/wFormStandardPage.tuto?awForm=pagedGrid.scx implements grid.onHeaderClicked():

oGrid.onHeaderClicked = function(event, col){
            event.cancelBubble = true;
            event = Event.extend(event); // http://api.prototypejs.org/dom/Event/extend/
            if(event.isLeftClick()){
                col = parseInt(col, 10);
                var result, dynCC;
                if (typeof row !== 'undefined') {
                    row = parseInt(row, 10);
                    dynCC = this.getCellCurrentControl(col,row);
                }
                switch (col){
                    case 00: result = FoxInCloud.gridHeaderClicked(event, $('pagedgrid_scx-awgrd1-awgrd1'), 'pagedgrid_scx-awgrd1-awgrd1-column1-header1');break;
                    case 01: result = FoxInCloud.gridHeaderClicked(event, $('pagedgrid_scx-awgrd1-awgrd1'), 'pagedgrid_scx-awgrd1-awgrd1-column2-header1');break;
                    case 02: result = FoxInCloud.gridHeaderClicked(event, $('pagedgrid_scx-awgrd1-awgrd1'), 'pagedgrid_scx-awgrd1-awgrd1-column3-header1');break;
                }
                return result;
            }
            if(event.isRightClick()){ // http://api.prototypejs.org/dom/Event/isRightClick/
                event.preventDefault(); // HERE
                col = parseInt(col, 10);
                var result, dynCC;
                if (typeof row !== 'undefined') {
                    row = parseInt(row, 10);
                    dynCC = this.getCellCurrentControl(col,row);
                }
                switch (col){
                    case 00: result = FoxInCloud.gridHeaderClicked(event, $('pagedgrid_scx-awgrd1-awgrd1'), 'pagedgrid_scx-awgrd1-awgrd1-column1-header1');break;
                    case 01: result = FoxInCloud.gridHeaderClicked(event, $('pagedgrid_scx-awgrd1-awgrd1'), 'pagedgrid_scx-awgrd1-awgrd1-column2-header1');break;
                    case 02: result = FoxInCloud.gridHeaderClicked(event, $('pagedgrid_scx-awgrd1-awgrd1'), 'pagedgrid_scx-awgrd1-awgrd1-column3-header1');break;
                }
                return result;
            }
        };

We try to prevent the browser context menu to appear by:

event.preventDefault(); // HERE

works on some browsers, and not on some others; eg:
Firefox PC OK
Firefox Mac KO

This code solves the problem on Firefox Mac:

$('aw36-header-2-box-text').observe('contextmenu', function(event){event.preventDefault()})

QUESTION:
How can I get the 'aw36-header-2-box-text' id automatically?

eg

var headerID = oGrid.getHeaderID(col); // does this method exist?
$(headerID).observe('contextmenu', function(event){event.preventDefault()});

Thanks,

Calling event.preventDefault() will trigger exception in IE - it does not have such method. IE looks at event.returnValue property instead. AW has a helper function which does it correctly depending on the current browser - AW.setReturnValue(event, value).

You can also assign the event directly on the header, or all headers if you skip index -

obj.getHeader().setEvent("oncontextmenu", function(event){
    AW.setReturnValue(event, false);
});

if you need header id - it is concatenated from grid id, which you can get via obj.getId(), then template name (header), then index, so you get '{gridId}-header-{index}'. You can skip -box-text as it will go inside header wrapper box and then text element.

Hi Alex,

Prototype.js leveredges

event.preventDefault()

for all browsers, including old versions of IE:

[exerpt of prototype code on github - https://github.com/sstephenson/prototype/blob/master/src/prototype/dom/event.js]

// These methods should be added _only_ to legacy IE event objects.
var additionalMethods = {
stopPropagation: function() { this.cancelBubble = true },
preventDefault: function() { this.returnValue = false },
inspect: function() { return '[object Event]' }
};

My tests reveals that, on browser such as firefox mac, we need to execute event.preventDefault() in oncontextmenu() of all descendants of the header DOM element.

Using prototype syntax, this works fine:

$(grid.getHeader(col).getId()).descendants().each(function(el){el.observe('contextmenu', function(event){event.preventDefault();})})

you can do the following comparative test on
http://foxincloud.com/tutotest/wFormStandardPage.tuto?awForm=pagedGrid.scx
by executing in the browser console:

1/ header object

var obj = $('pagedgrid_scx-grd-grd').oGrid; // reference to the AW grid object
obj.getHeader(1).setEvent("oncontextmenu", function(event){
    AW.setReturnValue(event, false);
});

if you right click header # 1, default context menu appears before event is processed by our application

2/ header object descendants

var obj = $('pagedgrid_scx-grd-grd').oGrid; // reference to the AW grid object
obj.descendants().each(function(el){el.observe('contextmenu', function(event){event.preventDefault();})})

context menu no longer appears when righ-clicking header # 1

Sorry, error in test # 2 - should read:

var obj = $('pagedgrid_scx-grd-grd').oGrid; // reference to the AW grid object
$(obj.getHeader(1).getId()).descendants().each(function(el){el.observe('contextmenu', function(event){event.preventDefault();})})