Editing second header makes headers jump about in FF3

Hi Alex,

I was trying to put an input box into the second header to allow filter text to be entered using AW 2.5.2.
It seems to work fine in IE6, but in FF3, the header scrolls about when the header is clicked and when onControlEditEnded for the input box is called.
Here's the code I'm using:

var obj = new AW.Grid.Extended;
obj.setCellText(function(i, j){return j + "." + i});
obj.setHeaderText(["header1", "header2", "header3", "header4", "header5", "header6", "header7", "header8", "header9", "header10"], 0);
obj.setHeaderCount(2);
obj.setFixedLeft(0);

obj.setColumnCount(10);
obj.setRowCount(100);

obj.onHeaderClicked = function(event, col, header) {
    if (header == 1) {
        var inp = new AW.UI.Input;
        obj.setHeaderTemplate(inp, col, 1);
        obj.getHeaderTemplate(col, 1).onControlEditEnded = function() {
            var text = this.getControlText();
            obj.setHeaderTemplate(new AW.Templates.ImageText, col, 1);
            obj.setHeaderText(text, col, 1);
            obj.getHeadersTemplate(1, "center").refresh();
        }
        obj.getHeadersTemplate(1, "center").refresh();
    }
}

document.write(obj);

Try editing the second header in column 7 by clicking on it, for example.
When you edit it, the grid headers jump till column 7 is aligned with the right of the grid.
Now, type in some text and hit enter - the headers jump to column 1.
During this jumping about, the grid data remains at the same position, so the columns are no longer in sync with the headers (it syncs up again as soon as I use the scrollbars)

Using alerts, I was able to see that the layout is intact till obj.getHeadersTemplate(1, "center").refresh() is called.
Can you suggest alternate code or a fix that will not make the headers jump about ?

Thanks,
Ankur

I guess the headers scroll because you refresh the whole row instead of the single cell. I would replace

obj.getHeadersTemplate(1, "center").refresh();

with

obj.getHeaderTemplate(col, 1).refresh();

or, you need to read the scrollLeft from the headers row element and restore it after refresh.

var inp = new AW.UI.Input;
        obj.setHeaderTemplate(inp, col, 1);
        obj.getHeaderTemplate(col, 1).onControlEditEnded = function() {
            var text = this.getControlText();
            obj.setHeaderTemplate(new AW.Grid.Header, col, 1);
            obj.setHeaderText(text, col, 1);
            obj.getHeaderTemplate(col, 1).refresh();
        }
        obj.getHeaderTemplate(col, 1).refresh();

Hi Alex,

The code works fine on FF3, but in IE6 and IE7, it now shows two lines in the input box (although the input box works fine).
I've put up a screenshot of IE6 at http://www.motreja.com/ankur/aw/aw-ie6.jpg

The code I used based on the above modifications is given below.
Any way to remove those two lines ?

var obj = new AW.Grid.Extended;
obj.setCellText(function(i, j){return j + "." + i});
obj.setHeaderText(["header1", "header2", "header3", "header4", "header5", "header6", "header7", "header8", "header9", "header10"], 0);
obj.setHeaderCount(2);
obj.setFixedLeft(0);

obj.setColumnCount(10);
obj.setRowCount(100);

obj.onHeaderClicked = function(event, col, header) {
    if (header == 1) {
        var inp = new AW.UI.Input;
        obj.setHeaderTemplate(inp, col, 1);
        obj.getHeaderTemplate(col, 1).onControlEditEnded = function() {
            var text = this.getControlText();
            obj.setHeaderTemplate(new AW.Grid.Header, col, 1);
            obj.setHeaderText(text, col, 1);
            obj.getHeaderTemplate(col, 1).refresh();
            //obj.getHeadersTemplate(1, "center").refresh();
        }
        obj.getHeaderTemplate(col, 1).refresh(); 
        //obj.getHeadersTemplate(1, "center").refresh();
        obj.getHeaderTemplate(col, 1).focus();
    }
}

document.write(obj);

I also tried to use similar code for a combo box in the header, but that doesn't seem to work at all in any of the browsers.
The code is given below.

var obj = new AW.Grid.Extended;
obj.setCellText(function(i, j){return j + "." + i});
obj.setHeaderText(["header1", "header2", "header3", "header4", "header5", "header6", "header7", "header8", "header9", "header10"], 0);
obj.setHeaderCount(2);
obj.setFixedLeft(0);

obj.setColumnCount(10);
obj.setRowCount(100);

obj.onHeaderClicked = function(event, col, header) {
    if (header == 1) {
        var combo = new AW.UI.Combo;
        obj.setHeaderTemplate(combo, col, 1);
        obj.getHeaderTemplate(col, 1).setItemText(["a", "b", "c", "d"]);
        obj.getHeaderTemplate(col, 1).setItemCount(4);
        obj.getHeaderTemplate(col, 1).onControlEditEnded = function() {
            var text = this.getControlText();
            obj.setHeaderTemplate(new AW.Grid.Header, col, 1);
            obj.setHeaderText(text, col, 1);
            obj.getHeaderTemplate(col, 1).refresh();
            //obj.getHeadersTemplate(1, "center").refresh();
        }
        obj.getHeaderTemplate(col, 1).refresh();
        //obj.getHeadersTemplate(1, "center").refresh(); 
        obj.getHeaderTemplate(col, 1).focus();
    }
}

document.write(obj);

Any ideas on this one ?

Thanks,
Ankur

ok, now I understand... I knew getHeadersTemplate() was there on purpose, but could not remember what was it. I guess then you have to use your original code but add save/restore scroll position during refresh.

Hi Alex,

It works after adding the save and restore scroll positions code in both FF3 and IE6.
I'm including the code below, just in case someone wants the entire working code.
Alex, if there is a better way to save and restore the scroll positions, please let us know.

Here's the code for input boxes in the second header:

var obj = new AW.Grid.Extended;
obj.setCellText(function(i, j){return j + "." + i});
obj.setHeaderText(["header1", "header2", "header3", "header4", "header5", "header6", "header7", "header8", "header9", "header10"], 0);
obj.setHeaderCount(2);
obj.setFixedLeft(0);

obj.setColumnCount(10);
obj.setRowCount(100);

obj.onHeaderClicked = function(event, col, header) {
    if (header == 1) {
        var inp = new AW.UI.Input;
        obj.setHeaderTemplate(inp, col, 1);
        obj.getHeaderTemplate(col, 1).onControlEditEnded = function() {
            var text = this.getControlText();
            obj.setHeaderTemplate(new AW.Grid.Header, col, 1);
            obj.setHeaderText(text, col, 1);

            var scrollLeft = obj.getViewTemplate("box", "top", "center").element().scrollLeft;
            obj.getHeadersTemplate(1, "center").refresh();
            obj.getViewTemplate("box", "top", "center").element().scrollLeft = scrollLeft;

        }
        var scrollLeft = obj.getViewTemplate("box", "top", "center").element().scrollLeft;
        obj.getHeadersTemplate(1, "center").refresh();
        obj.getViewTemplate("box", "top", "center").element().scrollLeft = scrollLeft;

        obj.getHeaderTemplate(col, 1).focus();
    }
}

document.write(obj);

And here's the code for combo boxes in the second header:

var obj = new AW.Grid.Extended;
obj.setCellText(function(i, j){return j + "." + i});
obj.setHeaderText(["header1", "header2", "header3", "header4", "header5", "header6", "header7", "header8", "header9", "header10"], 0);
obj.setHeaderCount(2);
obj.setFixedLeft(0);

obj.setColumnCount(10);
obj.setRowCount(100);

obj.onHeaderClicked = function(event, col, header) {
    if (header == 1) {
        var combo = new AW.UI.Combo;
        obj.setHeaderTemplate(combo, col, 1);
        obj.getHeaderTemplate(col, 1).setItemText(["a", "b", "c", "d"]);
        obj.getHeaderTemplate(col, 1).setItemCount(4);
        obj.getHeaderTemplate(col, 1).onControlEditEnded = function() {
            var text = this.getControlText();
            obj.setHeaderTemplate(new AW.Grid.Header, col, 1);
            obj.setHeaderText(text, col, 1);

            var scrollLeft = obj.getViewTemplate("box", "top", "center").element().scrollLeft;
            obj.getHeadersTemplate(1, "center").refresh();
            obj.getViewTemplate("box", "top", "center").element().scrollLeft = scrollLeft;

        }

        var scrollLeft = obj.getViewTemplate("box", "top", "center").element().scrollLeft;
        obj.getHeadersTemplate(1, "center").refresh();
        obj.getViewTemplate("box", "top", "center").element().scrollLeft = scrollLeft;

        obj.getHeaderTemplate(col, 1).focus();
    }
}

document.write(obj);

Thanks,
Ankur