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?