Problem using table for layout (after setId)

Hi!
First of all I would like to write that it is amazing what you have programmed. I have learned much from it. But as all around here I have a problem too... :) I used table for layout and all worked fine until i called setId function (and defined columnwidth for that id). After that the header of grid became desynchronized from the rest of the grid. A manual resize on column fixes it, but there must be a workaround (or I missed something :) I tried refresh after onLoad but it did not help.
Here is the code:

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


<link href="grid/runtime/styles/flat/grid.css" rel="stylesheet" type="text/css" ></link>
<script src="grid/runtime/lib/grid.js"></script>


<style>
#test .active-column-0 {width: 90%;}
.active-controls-grid {height: 100%; font: menu;}

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


<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>
<table width="100%" height="100%" border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td>

<script>

// create ActiveWidgets Grid javascript object
var obj = new Active.Controls.Grid;
obj.setId("test");
// 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]});

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

// set click action handler
obj.setAction("click", function(src){window.status = src.getItemProperty("text")});

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

</script>
</td>
</tr>
</tbody>
</table>
</body>
</html>

pentarim

August 9,

I gave column width in %, if i define in pixels the problem does not come. Help still needed because resize dont work good if i define static width. Plz give me some hint what to do! Thanks alot

pentarim

August 9,

give table a special CSS style -

style="table-layout: fixed;"

doesn't look in your code, but if grid container TD has style="text-align: right" (or something equivalent like align="right"), it can screw the grid header. In that case try this style (I remember having this problem once)

.active-controls-grid {height: 100%; font: menu; text-align: left;}

try something from http://www.activewidgets.com/messages/1739-2.htm also...

Sudhaker Raj

August 9,

did anyone resolve this?

Dean

February 17,

Hi Alex,

Having the same problem but its not relevant to setId().
becayse of layout limitations grid is contained in a table and is cropped to visible pixel.

The only (bad) solution that works is setting the height in px of the TD tag or setting the overflow of the active-controls-grid to visible and that breaks the table design;

still searching the forum for a solution.

InonI

May 4,

I solved this issue by writing some grid size calculation functions.
and setting the grid elemnts with expliced pixel values.

obj.getGridWidth= function() {
    // add all column widths + corner
}
obj.getGridHeight = function(){
   // add coulmnheader  + (gridRows * rowCount) + 3;
}
obj.setStyle("height", obj.getGridHeight ());
obj.setStyle("width", obj.getGridWidth())

since i set the exact size of the div element there is no scrolling,
so there was no need to take that into acount. I instead show a full length grid and use the window to scroll the grid.

InonI

May 7,

This topic is archived.

Problem using table for layout (after setId)

See also:

Search

New Data Grid

Version 2