Sort on Row Header Field??

I have a grid implemented where I have added my own row Headers via the obj.setRowText. The issue I am stuck with right now is being able to sort on that row.

When the grid first loads, I have pre-sorted the arrays on the server so that the rowHeaders are in fact the initial sort (alpha asc). If a user clicks on any of the other columns in the grid there is however no way to resort the grid back to the initial state, i.e. resort the grid based on the rowHeaders.

So I am seeking help in understanding how I can sort based on the rowText.

No-one has any ideas or help?

Something like this:

function restoreInitialSort(){
    var count = obj.getRowProperty("count");
    var array = [];
    for (i=0; i<count; i++){
        array[i] = i;
    }
    obj.setRowProperty("values", array);
    obj.setSortProperty("index", -1);
    obj.refresh();
}

var corner = obj.getLayoutTemplate().getContent("corner");
corner.setEvent("onclick", restoreInitialSort);

This thread may also help a little bit:
http://www.activewidgets.com/messages/1038-3.htm

Alex thanks for posting code above. This almost does it for me. I guess I did not explain myself well enough in the initial question. What I want to be able to do is be able to sort column 0 as you can any other column in the grid (1 to n). I can hook up the event handler as above, but are stuggling with how to enable sorting of column 0 both ascending/descending.

Thanks in advance

Here is the code which does proper sorting:

//	create ActiveWidgets Grid javascript object
    var obj = new Active.Controls.Grid;

    //	set number of rows/columns
    obj.setRowProperty("count", 20);
    obj.setColumnProperty("count", 5);

    //	provide cells and headers text
    obj.setDataProperty("text", function(i, j){return myData[i][j]});
    obj.setColumnProperty("text", function(i){return myColumns[i]});

    //	replace row header text with first data column
    obj.setRowProperty("text", function(i){return this.getDataProperty("text", i, 0)});

    //	set indices of other columns
    obj.setColumnProperty("values", [1,2,3,4]);

    //	set headers width/height
    obj.setRowHeaderWidth("100px");
    obj.setColumnHeaderHeight("20px");

    //	define template for the first column header
    obj.defineTemplate("corner", new Active.Templates.Header);

    //	assign this template as the content of top left corner
    obj.getLayoutTemplate().setContent("corner", function(){return this.getCornerTemplate(0)});


    //	adjust header template
    var corner = obj.getCornerTemplate();

    //	redirect item property requests to column property
    corner.getItemProperty = function(name){return this.getColumnProperty(name, 0)};

    // disable resizing
    corner.getContent("div").setEvent("onmousedown", null);
    corner.getContent("div").setStyle("cursor", "default");

    // set width and height
    corner.setStyle("width", "100px");
    corner.setStyle("height", "20px");

    // text alignment
    corner.setStyle("text-align", "center");


    //	write grid html to the page
    document.write(obj);

The example is based on JS array, but it should work with XML data models as well.