Scrollbars Disapear after seting Id

I'm loading the data from a php table so I used the example that came with the code with some modifications. After the comand to set an Id so I can change the columns widths, I'm receiving a javascript error:
Line: 28
Char: 37476
Error: 'runtimeStyle' is null or not an objet

And the scrollbars disapear from the grid.

If I comment the line from my code to set an Id to the grid the error dissapear and the scrollbars work again.

Can you help me? (Sorry for the bad English, I'm from Brasil)

My code as follows:

<?php
function activewidgets_grid($name, &$data){

$row_count = @mysql_num_rows($data);
$column_count = @mysql_num_fields($data);

$columns = "var ".$name."_columns = [\n";
for ($i=0; $i < $column_count; $i++) {
$columns .= "\"".@mysql_field_name($data, $i)."\", ";
}
$columns .= "\n];\n";

$rows = "var ".$name."_data = [\n";
while ($result = @mysql_fetch_array($data)) {
$rows .= "[";
for ($i=0; $i < $column_count; $i++) {
$rows .= "\"".activewidgets_html($result[$i])."\", ";
}
$rows .= "],\n";
}
$rows .= "];\n";

$html = "<"."script".">\n";
$html .= $columns;
$html .= $rows;
$html .= "try {\n";
$html .= " var $name = new Active.Controls.Grid;\n";
$html .= " $name.setRowCount($row_count);\n";
$html .= " $name.setColumnCount($column_count);\n";
$html .= " $name.setDataText(function(i, j){return ".$name."_data[i][j]});\n";
$html .= " $name.setColumnText(function(i){return ".$name."_columns[i]});\n";
//mouse over color code
$html .= " var row = new Active.Templates.Row;\n";
$html .= " row.setEvent(\"onmouseover\", \"mouseover(this, 'active-row-highlight')\");\n";
$html .= " row.setEvent(\"onmouseout\", \"mouseout(this, 'active-row-highlight')\");\n";
$html .= " obj.setTemplate('row', row);\n";
$html .= " obj.setAction('selectionChanged', mySelect);\n";
//apagar o conteudo do primeiro row cinza
$html .= " obj.setRowText('');\n";
//**************************************************
//seting id
$html .= " obj.setId('MeuGrid');\n";
//**************************************************
$html .= " document.write($name);\n";
$html .= "}\n";
$html .= "catch (error){\n";
$html .= " document.write(error.description);\n";
$html .= "}\n";
$html .= "</"."script".">\n";

return $html;
}

function activewidgets_html($msg){

$msg = addslashes($msg);
$msg = str_replace("\n", "\\n", $msg);
$msg = str_replace("\r", "\\r", $msg);
$msg = htmlspecialchars($msg);

return $msg;
}
?>

My grid page code:

<?php
include "../testa_sessao_interno.php";

//conectar no banco de dados
$conexao = mysql_connect("localhost","USER","******");
if (!$conexao) {
echo "Falha na conexÃ£o";
exit();
}

mysql_select_db("USER");
$vresultado = mysql_query("SELECT * FROM preferencias");
$loja = mysql_result($vresultado,0,"nome_loja");

?>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title><?php echo "AdministraÃ§Ã£o do Site " . $loja; ?></title>

<link rel="stylesheet" href="../estilos.css" type="text/css">

<link href="../runtime/styles/xp/grid.css" rel="stylesheet" type="text/css" ></link>
<style>
body, html {margin:0px; padding: 0px; overflow: hidden;font: menu;border: none;}

.active-scroll-left .active-templates-item,
.active-scroll-data .active-templates-row {
height: 20px;

.active-row-highlight {background-color: #CDE6FE}
.active-row-highlight .active-row-cell {background-color: #CDE6FE}
}

.active-controls-grid {
color: #000000;
background: #ffffff;
font-size: 8pt;
font-weight: bold;
border: 3px double #0099ff;
height: 100%;
}

.active-column-0 {display: none!important;}
.active-column-1 {width:200px; text-align: left;}
.active-column-2 {width:300px; text-align: left;}
.active-column-3 {width:60px; text-align: left;}
.active-column-4 {width:120px; text-align: left;}
.active-column-5 {width:50px; text-align: center;}

</style>
<script src="../runtime/lib/grid.js"></script>

<?php include("activewidgets.php") ?>
<script>
function mySelect(){
var index = this.getSelectionProperty("index");
var text = this.getDataProperty("text", index, 1);
numeroid = this.getDataProperty("text", index, 0);
}
</script>
</head>
<body>
<table width="100%" height="100%" align="center" style="height:100%;table-layout: fixed;">
<tr>
<td align="center" height="20" valign="middle">
<?php

echo "<span class=\"FonteTitulo\">AdministraÃ§Ã£o do Site " . $loja . " - Gerenciar Produtos</span>";

?>
</td>
</tr>
<tr>
<td>
<?php

// grid object name
$name = "obj";

// SQL query
$query = "select * from produtos";

// database connection
$connection = mysql_connect("localhost", "aquagism_o", "smallville");
mysql_select_db("aquagism_o");

// query results
$data = mysql_query($query, $connection);

// add grid to the page
echo activewidgets_grid($name, $data);
?>
</td>
</tr>
<tr>
<td height="60">
<table width="100%" border="0" cellpadding="0" cellspacing="0" class="FundoTabela">
<tr>
<td><table width="100%" border="0">
<tr align="center" class="FonteNormal">
<td width="15%" bgcolor="#FFFFFF"><img src="../imagens/package_add.png" width="32" height="32" ><br>
Adicionar Produto </td>
<td width="14%" bgcolor="#FFFFFF"><img src="../imagens/wrench.png" width="32" height="32"><br>
Editar Produto </td>
<td width="14%" bgcolor="#FFFFFF"><img src="../imagens/camera.png" width="32" height="32"><br>
Gerenciar Fotos </td>
<td width="14%" bgcolor="#FFFFFF"><img src="../imagens/delete2.png" width="32" height="32"><br>
Remover Produto </td>
<td width="14%" bgcolor="#FFFFFF"><img src="../imagens/view.png" width="32" height="32"><br>
Visualizar</td>
<td width="14%" bgcolor="#FFFFFF"><img src="../imagens/nav_up_green.png" width="32" height="32"><br>
Mover p/ Cima </td>
<td width="15%" bgcolor="#FFFFFF"><img src="../imagens/nav_down_green.png" width="32" height="32"><br>
Mover p/ Baixo </td>
</tr>
</table></td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>

I am not a PHP expert , but can't find a reason why you switch beteen "$name" and "obj".
Did you try replacing obj with $name in the lines ???:

$html .= " obj.setTemplate('row', row);\n";

$html .= " obj.setAction('selectionChanged', mySelect);\n";

//apagar o conteudo do primeiro row cinza

$html .= " obj.setRowText('');\n";

//**************************************************

//seting id

$html .= " obj.setId('MeuGrid');\n";

//**************************************************

still not working... Thanks anyway.

Now it is working, I had to replace almost all php code for direct javascript code, leaving just the code for the row data part as php. After setting the id, the scrollbars don't work yet, but now I can resize the columns without setting an ID.

I think this is the problem with styles. You set the Grid object ID as MeuGrid and not defined the style for that. I am not sure this will help you. Please try this

replace the code snippet between <style> </style> to the below and try it.

<style>
body, html {margin:0px; padding: 0px; overflow: hidden;font: menu;border: none;}
#MeuGrid {border: 0px inset;}
.active-scroll-left .active-templates-item,
.active-scroll-data .active-templates-row { height: 20px; .active-row-highlight {background-color: #CDE6FE} .active-row-highlight .active-row-cell {background-color: #CDE6FE} }
.active-controls-grid { color: #000000; background: #ffffff; font-size: 8pt; font-weight: bold; border: 3px double #0099ff; height: 100%; }
.active-column-0 {display: none!important;}
.active-column-1 {width:200px; text-align: left;}
.active-column-2 {width:300px; text-align: left;}
.active-column-3 {width:60px; text-align: left;}
.active-column-4 {width:120px; text-align: left;}
.active-column-5 {width:50px; text-align: center;}
</style>

Forum search