Fixed columns in ver 1.0

I have read a few messages that state that fixed columns are not available, I felt these messages are old (ver 0.3.2 ..) and wanted to know if this functionality has been added to the grid. If not is there a way to implement this, currently I can live with 1 fixed column and am willing to change the row headers with this column

June 17,
Yes, you can put your data into the row header area, so it will look like 1 fixed column.

Alex (ActiveWidgets)
June 17,
Hi Alex,

I did this and ran into 2 problems
(1) How do I give this column (the row header columns) a title
(2) How do I get the column to behave like a regular column i.e have grid lines and selection behavior similar to other columns

Thanks a lot for all your assistance and sorry for any inconvinience I may have caused

June 21,
The first point should be solved by:

The second was discussed here:

I just put all pieces together:

    <title>ActiveWidgets Grid :: Examples</title>
    <style> body, html {margin:0px; padding: 0px; overflow: hidden; border: none;} </style>

    <!-- ActiveWidgets stylesheet and scripts -->
    <link href="../../runtime/styles/xp/grid.css" rel="stylesheet" type="text/css" ></link>
    <script src="../../runtime/lib/grid.js"></script>

    <!-- grid format -->
        .active-controls-grid {height: 100%; font: menu;}

        .active-column-0 {text-align: center; }
        .active-column-1 {width: 200px;}
        .active-column-2 {text-align: right;}
        .active-column-3 {text-align: right;}
        .active-column-4 {text-align: right;}

        .active-grid-column {border-right: 1px solid threedlightshadow;}
        .active-grid-row {border-bottom: 1px solid threedlightshadow;}

        .active-grid-row {
            height: 18px;
            background: #fff;


    <!-- grid data -->
        var myData = [
            ["MSFT","Microsoft Corporation", "314,571.156", "32,187.000", "55000"],
            ["ORCL", "Oracle Corporation", "62,615.266", "9,519.000", "40650"],
            ["SAP", "SAP AG (ADR)", "40,986.328", "8,296.420", "28961"],
            ["CA", "Computer Associates Inter", "15,606.335", "3,164.000", "16000"],
            ["ERTS", "Electronic Arts Inc.", "14,490.895", "2,503.727", "4000"],
            ["SFTBF", "Softbank Corp. (ADR)", "14,485.840", ".000", "6865"],
            ["VRTS", "Veritas Software Corp.", "14,444.272", "1,578.658", "5647"],
            ["SYMC", "Symantec Corporation", "9,932.483", "1,482.029", "4300"],
            ["INFY", "Infosys Technologies Ltd.", "9,763.851", "830.748", "15400"],
            ["INTU", "Intuit Inc.", "9,702.477", "1,650.743", "6700"],
            ["ADBE", "Adobe Systems Incorporate", "9,533.050", "1,230.817", "3341"],
            ["PSFT", "PeopleSoft, Inc.", "8,246.467", "1,941.167", "8180"],
            ["SEBL", "Siebel Systems, Inc.", "5,434.649", "1,417.952", "5909"],
            ["BEAS", "BEA Systems, Inc.", "5,111.813", "965.694", "3063"],
            ["SNPS", "Synopsys, Inc.", "4,482.535", "1,169.786", "4254"],
            ["CHKP", "Check Point Software Tech", "4,396.853", "424.769", "1203"],
            ["MERQ", "Mercury Interactive Corp.", "4,325.488", "444.063", "1822"],
            ["DOX", "Amdocs Limited", "4,288.017", "1,427.088", "9400"],
            ["CTXS", "Citrix Systems, Inc.", "3,946.485", "554.222", "1670"],
            ["KNM", "Konami Corporation (ADR)", "3,710.784", ".000", "4313"]

        var myColumns = [
            "Ticker", "Company Name", "Market Cap.", "$ Sales", "Employees"

    //	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

    //	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");

    corner.setClass("column", "0");

    //	modify template-model mappings
    obj.getLeftTemplate = function(){
        var template = this.defaultLeftTemplate();
        return template;

    //	rebuild selection/value methods
    obj.defineSelectionPropertyArray("value", 0);

    var setSelectionValues = obj.setSelectionValues;

    //	include left/item refresh
    obj.setSelectionValues = function(array){
        var i, current = this.getSelectionValues();
        setSelectionValues.call(this, array);

        for (i=0; i<current.length; i++) {

        for (i=0; i<array.length; i++) {


    //	row selection event
    var selectRow = function(event){
        if (event.shiftKey) {return this.action("selectRangeOfRows")}
        if (event.ctrlKey) {return this.action("selectMultipleRows")}

    var cell = new Active.Templates.Text;
    cell.setClass("grid", "row");
    cell.setClass("row", "cell");
    cell.setClass("column", "0");
    cell.setEvent("onclick", selectRow);
    obj.setTemplate("left/item", cell);

    //	write grid html to the page

Alex (ActiveWidgets)
June 22,
Amazing!! You are the best

Thanks a lot.

June 22,
Hi Alex,

Can you tell me how to freeze multiple columns in a table .

October 5,
With this version (1.0) freezing multiple columns is not possible.
Alex (ActiveWidgets)
October 7,
I have tested this piece of code and it works great.
But I also want this column to be resizable.
I have try to comment this lines :

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

But of course, it's not enough. Is there a simple way to make this available ?
October 27,

How to make the fixed column resizable?

Thank you, this is great grid.
May 26,
Hi Alex
I don't know how to make a column fixed in html.
I specificate the number of px, but if I insert a large image in it, the width changes. What is the tag I try?
July 15,
Is possible to resize the first column???

August 2,
how do u fix an image for a background using javascript?
while positioning it at a certian location (ie left: 100px, top: 400px;)
November 14,
Hi all,

I am trying to freeze columns in the datatable, i am doing that using the div id approach. I have created a stylesheet class named ".locked" and the multiple number of columns get frozen.

but this feature is not working in Mozilla.

Any help in this regard will be much appreciated ?

Freeze columns in grid
February 13,

This topic is archived.

See also:

Back to support forum