Changing Combo background

Hi everyone

I have a grid with a column (column 3) that is entirely combos, set up using:
obj.setCellTemplate(new AW.Templates.Combo, 3)

so the user can select a different value from the combo for each individual row.

In the header for this column I also have a combo (with the same values) which can be used to select a value that can be applied to all rows in the grid. This "set all" is done with a button also in the header that has:

value = headerCombo.getControlValue();
button.onControlClicked = function() {
for (i=0; i<obj.getRowCount(); i++) {
obj.setCellText(value,3,obj.getRowIndices()[i]);
}
};

If there are a few hundred rows, it takes some time for this "set all" to work (especially in IE), so what I am trying to do is change the background colour of the header combo so that the user is aware that the "set all" is actually working. In priciple the background color can be changed at the beginning of the "set all" and then changed back again at the end as follows:


document.getElementById('headerCombo-box').style.background = 'gray'
value = headerCombo.getControlValue();
button.onControlClicked = function() {
for (i=0; i<obj.getRowCount(); i++) {
obj.setCellText(value,3,obj.getRowIndices()[i]);
}
document.getElementById('headerCombo-box').style.background = 'white'
};

Now the problem with this (in both IE and FF) is that the style change doesn't seem to happen because the function is already busy doing the loop. I can only get it to work by interupting the function with some "alert" statement after the style change and before the loop. Also, trying to pause the function (setTimeout) doesn't seem to work either.

Any ideas on how to force the style change at the beginning (and end)of the onControlClicked function would be gratefully recieved.

Will

Will, I believe setTimeout should work -

document.getElementById('headerCombo-box').style.background = 'gray'

window.setTimeout(function(){
value = headerCombo.getControlValue();
button.onControlClicked = function() {
for (i=0; i<obj.getRowCount(); i++) {
obj.setCellText(value,3,obj.getRowIndices()[i]);
}
document.getElementById('headerCombo-box').style.background = 'white'
};
}, 100);

IE and FF only start rendering the changes after your script/function is finished, so you have to use setTimeout() to make intermediate changes visible.

Alex

Thanks for prompt reply.

Not sure if that's right. I see that I made a mistake in posting my message as the style change to gray should be first line of button.onControlClicked function (colour should first change when user clicks the button and then change back to white when the loop has finished). So I would have thought that a setTimeout should be inside the button.onControlClicked function?

Will

Yes, you are right, thats my mistake, should be something like this -

button.onControlClicked = function() {
var value = headerCombo.getControlValue();
document.getElementById('headerCombo-box').style.background = 'gray'

window.setTimeout(function(){
for (i=0; i<obj.getRowCount(); i++) {
obj.setCellText(value,3,obj.getRowIndices()[i]);
}
document.getElementById('headerCombo-box').style.background = 'white';
}, 100);
}

Alex,

Yes, that works perfectly. Many thanks indeed.

Will