ActiveWidgets • 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>
Change Header Class Dynamically

Forum search
