3.0.5

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>

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

<!-- grid format -->
<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>

<!-- 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>
<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.

See also:


Back to support forum