Contribution

Ok, here is a contribution for a change...
I've built a wrapper around the Grid control to facilitate the creation and setting of parameters like... setting columns, ColsStyles, ColWidth, Select and Unselect, enable and disable...

Comments suggestions welcome.

Active.Controls.CoolGrid = Active.Controls.Grid.subclass();

Active.Controls.CoolGrid.create = function(){

/****************************************************************

Enhances the grid control with resizable rows.

*****************************************************************/

var obj = this.prototype;
var _super = this.superclass.prototype;
    //Data
    var data;
    var colLinkData;
    var columns;
    var colStyles;
    /* Col types
     * 0 - int
     * 1 - string
     * 2 - date
     * 3 - float
     * 4 - currency
     * 5 - Link
     */
    var colTypes;
    //Event Handlers
    // Used to save the default ones when disabled
    var onkeydown;
    var onmousewheel;
    var onclick;
    var onmousedown;
    var onmouseenter;
    var onmouseleave;
    var onkeydownonmousedown;
    var onkeydownonscroll;


    var stylesheet = document.styleSheets[document.styleSheets.length-1];
    stylesheet.addRule(".gecko","-moz-box-sizing: border-box");
    stylesheet.addRule(".active-controls-grid", "border:2px groove");
    stylesheet.addRule(".active-grid-column", "border-right: 1px solid threedlightshadow;");
    stylesheet.addRule(".active-grid-row", "border-bottom: 1px solid threedlightshadow; ");
    
// ------------------------------------------------------------
    obj.setSelectionProperty("multiple", true);

    
    //Column Styles
Active.Controls.CoolGrid.prototype.setColLinkData= function (aLinkData){
        colLinkData = aLinkData ;
    }
    //Col types
Active.Controls.CoolGrid.prototype.setColTypes= function (aTypes){
        colTypes = aTypes;
    }

    //Column Styles
Active.Controls.CoolGrid.prototype.setColStyles= function (aStyles){
        var stylesheet = document.styleSheets[document.styleSheets.length-1];
        for(i=0;i<aStyles.length;i++)
            if(aStyles[i]!="")
                stylesheet.addRule(".active-column-" + i ,aStyles[i]);
    }
    //Column Width
Active.Controls.CoolGrid.prototype.setColWidth= function (aWidth){
        var stylesheet = document.styleSheets[document.styleSheets.length-1];
        for(i=0;i<aWidth.length;i++)
            if(aWidth[i])
                stylesheet.addRule(".active-column-" + i ,"width:" + aWidth[i]);
    }
    // Set data
Active.Controls.CoolGrid.prototype.setData = function (aData){
     data = aData;
        this.setDataProperty("text", function(i, j){return data[i][j]});
this.setRowProperty("count", data.length);
     }
Active.Controls.CoolGrid.prototype.setColumns = function (aColumns){
     columns = aColumns;
        
     this.setColumnProperty("text", function(i){return columns[i]});
     this.setColumnProperty("count", columns.length);
     }

    
    //Append new row at the end of data
Active.Controls.CoolGrid.prototype.appendRow = function (aData){
            data = aData.concat(data);
this.setRowProperty("count", data.length);
this.refresh();
     }
     //Add row
Active.Controls.CoolGrid.prototype.addRow = function (){
         var rowData = new Array(columns.length);
            for(i=0;i<columns.length;i++)
                rowData[i]= "";
data.unshift(rowData);
this.setRowProperty("count", data.length);
this.refresh();

     }
    
    
     Active.Controls.CoolGrid.prototype.removeRow = function (){
        var index = this.getProperty("selection/index");
        if(index != '-1') {
            if (confirm("Are you sure you want to delete?")) {
                data.splice(index,1);
     this.setRowProperty("count", data.length);
                this.refresh();
            }
        } else alert('Error or something.');
     }
    // selected rows
    Active.Controls.CoolGrid.prototype.getSelectionValues= function (){
     return this.getProperty("row/values");
    }
     // select all rows
    Active.Controls.CoolGrid.prototype.selectAll = function (){
     var all = this.getProperty("row/values");
     this.setProperty("selection/values", all);
    }
    // un-select all rows
    Active.Controls.CoolGrid.prototype.unselectAll = function (){
     this.setProperty("selection/values", []);
    }
    // set cell value
    Active.Controls.CoolGrid.prototype.setCellValue = function (i,j,value){
        data[i][j] = value;
        this.refresh();
    }
     // get cell value
    Active.Controls.CoolGrid.prototype.getCellValue = function (i,j){
        return data[i][j] ;
    }
    // clear grid
    Active.Controls.CoolGrid.prototype.clear = function (){
        this.setData([]);
        this.refresh();
    }
    // disable Grid
    Active.Controls.CoolGrid.prototype.disable = function (){
        onkeydown = this.getEvent("onkeydown");
        onmousewheel= this.getEvent("onmousewheel");
        onclick= this.getTemplate("row").getEvent("onclick");
        onmousedown= this.getTemplate("top/item").getEvent("onmousedown");
        onmouseenter= this.getTemplate("top/item").getEvent("onmouseenter");
        onmouseleave= this.getTemplate("top/item").getEvent("onmouseleave");
        onkeydownonmousedown= this.getTemplate("top/item").getContent("div").getEvent("onmousedown");
        onkeydownonscroll= this.getTemplate("layout").getContent("scrollbars").getEvent("onscroll");
        this.setEvent("onkeydown", "");
        this.setEvent("onmousewheel", "");
        this.getTemplate("row").setEvent("onclick", "");
        this.getTemplate("top/item").setEvent("onmousedown", "");
        this.getTemplate("top/item").setEvent("onmouseenter", "");
        this.getTemplate("top/item").setEvent("onmouseleave", "");
        this.getTemplate("top/item").getContent("div").setEvent("onmousedown", "");
        this.getTemplate("layout").getContent("scrollbars").setEvent("onscroll", "");
    }
    // enable Grid
    Active.Controls.CoolGrid.prototype.enable = function (){
        this.setEvent("onkeydown", onkeydown);
        this.setEvent("onmousewheel", onmousewheel);
        this.getTemplate("row").setEvent("onclick", onclick);
        this.getTemplate("top/item").setEvent("onmousedown", onmousedown);
        this.getTemplate("top/item").setEvent("onmouseenter", onmouseenter);
        this.getTemplate("top/item").setEvent("onmouseleave", onmouseleave);
        this.getTemplate("top/item").getContent("div").setEvent("onmousedown", onkeydownonmousedown);
        this.getTemplate("layout").getContent("scrollbars").setEvent("onscroll", onkeydownonscroll);
    }
    
};

Active.Controls.CoolGrid.create();

Here is an example on how to create the CoolGrid.

var myData = [];
var myColumns = ["Prev","Customer", "Site", "Gross", "Tax", "Total"];
var styles = ["","","","text-align:right","text-align:right","text-align:right"];
var colTypes = [];
var linkData = [];
var colWidth = [60,200,200,70,70,70];
// create ActiveWidgets Grid javascript object
var gridPreview = new Active.Controls.CoolGrid;

gridPreview.setColumns(myColumns);
gridPreview.setColWidth(colWidth);
gridPreview.setColStyles(styles);
gridPreview.setColTypes(colTypes);
gridPreview.setColLinkData(linkData);

Good work :-)

There are known bug in default data model. Once you sort the grid by any column, add/delete row will start throwing errors.

Also If I set different column width and sort by any column the colulm width gets messed up....
Anyone?