:: Forum >>

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

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

/javascript.forum.42.2/
and
/javascript.forum.1083.4/
Alex (ActiveWidgets)
Thursday, June 17, 2004
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

Bhaskar
Monday, June 21, 2004
The first point should be solved by:
/javascript.forum.1083.4/

The second was discussed here:
/javascript.forum.1038.3/

I just put all pieces together:

<html>
<head>
    <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 -->
    <style>
        .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;
        }


    
</style>

    <!-- grid data -->
    <script>
        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"
        ];
    
</script>
</head>
<body>
    <script>

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

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


    // modify template-model mappings
    obj.getLeftTemplate = function(){
        var template = this.defaultLeftTemplate();
        template.setDataModel(this.getRowModel());
        template.setItemsModel(this.getRowModel());
        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++) {
            this.getRowTemplate(current[i]).refreshClasses();
            this.getLeftTemplate().getItemTemplate(current[i]).refreshClasses();
        }

        for (i=0; i<array.length; i++) {
            this.getRowTemplate(array[i]).refreshClasses();
            this.getLeftTemplate().getItemTemplate(array[i]).refreshClasses();
        }

        this.action("selectionChanged");
    };

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

    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
    document.write(obj);

    
</script>
</body>
</html>
Alex (ActiveWidgets)
Tuesday, June 22, 2004
Amazing!! You are the best

Thanks a lot.

Bhaskar
Tuesday, June 22, 2004
Hi Alex,

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

Smitha
Tuesday, October 5, 2004
With this version (1.0) freezing multiple columns is not possible.
Alex (ActiveWidgets)
Thursday, October 7, 2004
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 ?
√ɬČtienne
Wednesday, October 27, 2004
Alex,

How to make the fixed column resizable?

Thank you, this is great grid.
Qing
Thursday, May 26, 2005
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?
Thanx
jk
Friday, July 15, 2005
Is possible to resize the first column???



Thanks
Tunya
Tuesday, August 2, 2005
how do u fix an image for a background using javascript?
while positioning it at a certian location (ie left: 100px, top: 400px;)
shannon
Monday, November 14, 2005
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 ?

Thanks,
Tushar
Freeze columns in grid
Monday, February 13, 2006

This topic is archived.


Back to support forum

Forum search