Change column header text on resize

Hi,

I am trying to display custom text in the column header, while the column is being resized.

I have successfully captured the resize event :

var myhdr;
var mytimer = null;

function fnShowSize()
{
var pp = document.getElementById("P1");
pp.value = myhdr.offsetWidth;
myhdr.outerText = myhdr.offsetWidth;
}
var startColumnResize = function( header )
{
var el = header.element();
var pos = event.clientX;
var size = el.offsetWidth;
var grid = this;

myhdr = header.element();
mytimer = setInterval(fnShowSize, 100);

......

The code runs fnShowSize every 100 milliseconds as the user resizes (clearInterval called in the endresize).

The bit I can't yet figure is how to set the specific header text from the header element captured. My function above (myhdr.outerText) screws up the header - even though in debug it simply shows as a DIV with outerText of Column 1 etc.

Thanks

Regards

Graham