In this topic, you will learn how to manipulate the Column Header in order to respond with 'onmouseover' and 'onmouseout' client side events so that the Column Header will be highlighted at the bottom with different colors.

To highlight column header on mouse over

Obtain grid's table column header element using GetElement() method at the client side.
Attach 'onmouseover' as well as 'onmouseout' events using attachEvent() method.

Provide codes for 'onmouseover' and 'onmouseout' js functions.

JavaScript

Copy Code

function _wgGetTDElement(el) 
{
  if (el == null) return null
    
  if (el.tagName == "TD") return wgGetColumnByElement(el);
  else if (el.tagName == "TABLE") return null; // can't find TD
  else {
    return _wgGetTDElement(el.parentElement);
  }
}
    
function start() {
// obtain WebGrid instance 
var grid = ISGetObject("WebGrid1");

// obtain Column Header element of the grid
var table = grid.GetRootTable().GetElement(WG40.COLHEADER, WG40.HTMLTABLE);

// attach 'onmouseover' as well as 'onmouseout' events
// so that the appropriate functions will be invoked 
// when certain mouse actions are performed    
table.attachEvent("onmouseover", crm_over);
table.attachEvent("onmouseout", crm_out);
}
  
function crm_over() { 
// retrieve the object that fired the event
var el = event.srcElement;   
// obtain the grid's TD Element 
var column = _wgGetTDElement(el);
     
var td = column.GetElement();
// override the borderBottom property at runtime 
td.runtimeStyle.borderBottom = "orange 1px solid";
}
  
function crm_out() {
// retrieve the object that fired the event
var el = event.srcElement;          
// obtain the grid's TD Element 
var column = _wgGetTDElement(el);
      
var td = column.GetElement();
// override the borderBottom property at runtime 
td.runtimeStyle.borderBottom = "darkgray 1px solid";
}

Invoke the test function in <body MS_POSITIONING="GridLayout" onload="test">.
Compile and run the WebForm.

Intersoft WebGrid Documentation
How-to: Highlight the column header on mouse over
See Also Send comments on this topic.

To highlight column header on mouse over

See Also