mouseover doesn't work
Hello people! I'm using this awesome grid, but I'm having a tinny problem:
The grid works just fine retrieving values from Mysql through php.
But the mouseover doesn't do anything at all!
I've just copied the source code for this to work, as well as the css style.
Can anybody help me?
Keep up with the good job!
Congrats
--------------------------------The css style:
<style>
.active-controls-grid {height: 100%; font:Arial, Helvetica, sans-serif Arial; width:98%; text-align:center}
.active-grid-column {border-right: 1px solid threedlightshadow;}
.active-grid-row {border-bottom: 1px solid threedlightshadow;}
.active-templates-header
{
font-weight: bold;
color:#006699;
text-align:center;
}
.active-templates-item
{
text-align: center;
color:#999999;
}
.active-column-0 {width: 38px; text-align:left; font-size:11px; font-weight:bold; background-color:white; color:#999999}
.active-row-highlight {background-color:#3399CC;}
.active-row-highlight .active-row-cell {background-color: #3399CC;}
</style>
------------------------------The code:
$html = "<"."script".">\n";
$html .= $columns;
$html .= $rows;
//$html="";
$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";
$html .= " $name.setRowHeaderWidth('20px');\n";
$html .= " $name.setColumnHeaderHeight('24px');\n";
$html .= " var alternate = function(){ return this.getRowProperty('order') % 2 ? '#fcfaf6' : '#ffffff';}\n";
//isto é para marcar uma ou várias células a cor diferente:
//$html .= " var mark = function(){var i = this.getProperty('row/index'); return (i==2 || i==4 || i==5) ? true : false;}\n";
$html .= " var row = new Active.Templates.Row;\n";
$html .= " row.setStyle('background', alternate);\n";
//$html .= " row.setClass('mark', mark);\n";
$html .= " row.setEvent(\"onmoouseover\", \"mouseover(this, 'active-row-highlight')\");\n";
$html .= " row.setEvent(\"onmouseout\", \"mouseout(this, 'active-row-highlight')\");\n";
$html .= " $name.setTemplate('row', row);\n";
$html .= " $name.setColumnProperty('tooltip', function(i){return 'Clique para ordenar por esta coluna'});\n";
$html .= " var column = new Active.Templates.Text;\n";
//echo($html);
$html .= " document.write($name);\n";
The grid works just fine retrieving values from Mysql through php.
But the mouseover doesn't do anything at all!
I've just copied the source code for this to work, as well as the css style.
Can anybody help me?
Keep up with the good job!
Congrats
--------------------------------The css style:
<style>
.active-controls-grid {height: 100%; font:Arial, Helvetica, sans-serif Arial; width:98%; text-align:center}
.active-grid-column {border-right: 1px solid threedlightshadow;}
.active-grid-row {border-bottom: 1px solid threedlightshadow;}
.active-templates-header
{
font-weight: bold;
color:#006699;
text-align:center;
}
.active-templates-item
{
text-align: center;
color:#999999;
}
.active-column-0 {width: 38px; text-align:left; font-size:11px; font-weight:bold; background-color:white; color:#999999}
.active-row-highlight {background-color:#3399CC;}
.active-row-highlight .active-row-cell {background-color: #3399CC;}
</style>
------------------------------The code:
$html = "<"."script".">\n";
$html .= $columns;
$html .= $rows;
//$html="";
$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";
$html .= " $name.setRowHeaderWidth('20px');\n";
$html .= " $name.setColumnHeaderHeight('24px');\n";
$html .= " var alternate = function(){ return this.getRowProperty('order') % 2 ? '#fcfaf6' : '#ffffff';}\n";
//isto é para marcar uma ou várias células a cor diferente:
//$html .= " var mark = function(){var i = this.getProperty('row/index'); return (i==2 || i==4 || i==5) ? true : false;}\n";
$html .= " var row = new Active.Templates.Row;\n";
$html .= " row.setStyle('background', alternate);\n";
//$html .= " row.setClass('mark', mark);\n";
$html .= " row.setEvent(\"onmoouseover\", \"mouseover(this, 'active-row-highlight')\");\n";
$html .= " row.setEvent(\"onmouseout\", \"mouseout(this, 'active-row-highlight')\");\n";
$html .= " $name.setTemplate('row', row);\n";
$html .= " $name.setColumnProperty('tooltip', function(i){return 'Clique para ordenar por esta coluna'});\n";
$html .= " var column = new Active.Templates.Text;\n";
//echo($html);
$html .= " document.write($name);\n";
Sérgio Pereira
April 22,