Start Building Professional
Web Apps Today

Prevent column sorting in custom header

I have a custom header where I initially have a <span></span> for each column in a comma-separated string. I then fill the span with additional HTML to have an input box. When you click inside the input box, the columns get sorted. I want to stop the sorting when anything in my custom header is clicked.

I tried the following code and it works in FF, but not IE6/7.

el.parentNode.parentNode.setAttribute("onclick", "(arguments[0]||window.event).cancelBubble=true;");
el.parentNode.parentNode.setAttribute("onmousedown", "(arguments[0]||window.event).cancelBubble=true;");

First parentNode should be the <span>, next parentNode should be the <td> that the grid uses for the header row.

Is there something else that will prevent sorting action on custom header click?

The way how you set events not works in IE, you can change it to the

el.parentNode.parentNode.onclick=function(e){ e||window.event).cancelBubble=true; };

( you need only onclick event to stop sorting ) 
It possible to block behavior for all column in header row by 
    grid.hdr.rows[2].onclick=function(e){ e||window.event).cancelBubble=true; };

2 - index of header row