Change Header Class Dynamically

I'm using grid version 2-0-b2.

I have create context menu functionality for my grid. When I right click on a header, I want the Header rollover css style to remain until the context menu is removed. Because when the mouse moves off the header onto the context menu, the rollover style is removed.

I've tried the setStyle and setClass functions with no success, please help!
<html>
<head>
<script src="../../runtime/lib/aw.js"></script>
<link href="../../runtime/styles/xp/aw.css" rel="stylesheet"></link>
<style>
    table {font: menu; table-layout: fixed}
    #myGrid { width: 400px; height: 200px; }
    #myGrid .aw-row-selector {width: 20px; text-align: center}
    #myGrid .aw-filter {margin-left:-4; margin-top:-2;}
</style>

<style>
<!--
    .skin {
        padding: 5px 0px 5px 0px;
        cursor:default;
        font:menutext;
        position:absolute;
        text-align:left;
        font: menu;
        width:120px;
        background-color:#ebeadb;
        border:1 solid #d6d2c2;
        visibility:hidden;
        border:2 outset buttonhighlight;
    }
    .menuitems {
        padding-left:15px;
        padding-right:10px;
    }
-->
</style>
<SCRIPT LANGUAGE="JavaScript1.2">
<!-- Begin
var menuskin = "skin";
function showmenuie5() {
   var rightedge = document.body.clientWidth-event.clientX;
   var bottomedge = document.body.clientHeight-event.clientY;
   if (rightedge < ie5menu.offsetWidth)
      ie5menu.style.left = document.body.scrollLeft + event.clientX - ie5menu.offsetWidth;
   else
      ie5menu.style.left = document.body.scrollLeft + event.clientX;
   if (bottomedge < ie5menu.offsetHeight)
      ie5menu.style.top = document.body.scrollTop + event.clientY - ie5menu.offsetHeight;
   else
      ie5menu.style.top = document.body.scrollTop + event.clientY;
   ie5menu.style.visibility = "visible";
   return false;
}
function hidemenuie5() {
   ie5menu.style.visibility = "hidden";
   // Need To: Reset header style back to default header style //
}
function jumptoie5() {
   if (event.srcElement.className == "menuitems") {
      if (event.srcElement.getAttribute("target") != null)
         window.open(event.srcElement.url, event.srcElement.getAttribute("target"));
      else
         window.location = event.srcElement.url;
   }
}
//  End -->
</script>

</head>
<body class="aw-body">
<script>
    var myData = [
        ["MSFT","Microsoft Corporation", "314,571.156", "32,187.000", "55000"],
        ["ORCL", "Oracle Corporation", "62,615.266", "9,519.000", "40650"],
        ["SAP", "SAP AG (ADR)", "40,986.328", "8,296.420", "28961"],
        ["CA", "Computer Associates Inter", "15,606.335", "3,164.000", "16000"],
        ["ERTS", "Electronic Arts Inc.", "14,490.895", "2,503.727", "4000"],
        ["SFTBF", "Softbank Corp. (ADR)", "14,485.840", ".000", "6865"],
        ["VRTS", "Veritas Software Corp.", "14,444.272", "1,578.658", "5647"],
        ["SYMC", "Symantec Corporation", "9,932.483", "1,482.029", "4300"],
        ["INFY", "Infosys Technologies Ltd.", "9,763.851", "830.748", "15400"],
        ["INTU", "Intuit Inc.", "9,702.477", "1,650.743", "6700"],
        ["ADBE", "Adobe Systems Incorporate", "9,533.050", "1,230.817", "3341"],
        ["PSFT", "PeopleSoft, Inc.", "8,246.467", "1,941.167", "8180"],
        ["SEBL", "Siebel Systems, Inc.", "5,434.649", "1,417.952", "5909"],
        ["BEAS", "BEA Systems, Inc.", "5,111.813", "965.694", "3063"],
        ["SNPS", "Synopsys, Inc.", "4,482.535", "1,169.786", "4254"],
        ["CHKP", "Check Point Software Tech", "4,396.853", "424.769", "1203"],
        ["MERQ", "Mercury Interactive Corp.", "4,325.488", "444.063", "1822"],
        ["DOX", "Amdocs Limited", "4,288.017", "1,427.088", "9400"],
        ["CTXS", "Citrix Systems, Inc.", "3,946.485", "554.222", "1670"],
        ["KNM", "Konami Corporation (ADR)", "3,710.784", ".000", "4313"]
    ];

    var myColumns = [
        "Ticker", "Company Name", "Market Cap.", "$ Sales", "Employees"
    ];

    var obj = new AW.Grid.Extended;
    obj.setId("myGrid");
    obj.setSelectorVisible(true);
    obj.setSelectorText(function(i){return this.getRowPosition(i)+1});
    obj.setCellText(myData);
    obj.setHeaderText(myColumns);
    obj.setColumnCount(myColumns.length);
    obj.setRowCount(myData.length);

    obj.onHeaderMouseDown = function (event, index){
        if (header == 0) {
 			if (event.button == 2) {
                // Need To: Set right clicked header style to header mouseover style here //
                showmenuie5();
            }
        }
    };


    obj.onControlClicked = function () {hidemenuie5()};
    obj.onRowMouseDown = function () {hidemenuie5()};
    obj.onFooterMouseDown = function () {hidemenuie5()};

    document.write(obj);

</script>

<div id="ie5menu" class="skin" onClick="jumptoie5();">
<div class="menuitems" url="javascript:alert('Menu Item 1');">Item 1</div>
<div class="menuitems" url="javascript:alert('Menu Item 2');">Item 2</div>
<hr>
<div class="menuitems" url="javascript:alert('Menu Item 3');">Item 3</div>
<div class="menuitems" url="javascript:alert('Menu Item 4');">Item 4</div>
<hr>
<div class="menuitems" url="javascript:alert('Menu Item 5');">Item 5</div>
<div class="menuitems" url="javascript:alert('Menu Item 6');">Item 6</div>
</div>
<script language="JavaScript1.2">
if (document.all && window.print) {
ie5menu.className = menuskin;
document.oncontextmenu = function() {return false;};
document.body.onclick = hidemenuie5;
}
</script>

</body>
</html>
Devise
November 15,
Change Header Class Dynamically

See also:

Search

New Data Grid

Version 2
