Don't showing all columns

I would have a grid with 8 columns
But only one column is displayed and with all the contents of others columns separated with a " | "

Who could help me? Please.

My code:

<style>
.active-controls-grid {height: 345px; font: Tahoma;}
.active-column-0 {width: 80px; text-align: right;}
.active-column-1 {width: 80px; text-align: right;}
.active-column-2 {width: 80px; text-align: right;}
.active-column-3 {width: 80px; text-align: right;}
.active-column-4 {width: 80px; text-align: right;}
.active-column-5 {width: 80px; text-align: right;}
.active-column-6 {width: 80px; text-align: right;}
.active-column-7 {width: 80px; text-align: right;}
.active-grid-column {border-right: 1px solid threedshadow;}
.active-grid-row {border-bottom: 1px solid threedlightshadow;}
</style>

<script>
var myData = [
["1263", "14", "1", "F", "IMCEAFAX-$§4471960126351800000014001§$+40055055629@agf.com.br", "26/5/2006 00:00:00", "", "838,5"],
["1263", "15", "1", "F", "IMCEAFAX-$§4471960126351800000015001§$+40055055629@agf.com.br", "26/5/2006 00:00:00", "", "13,70625"],
["1263", "14", "1", "E", "resseguros.cosseguros@portoseguro.com.br", "26/5/2006 00:00:00", "", "587,6"],
["1263", "15", "1", "E", "resseguros.cosseguros@portoseguro.com.br", "26/5/2006 00:00:00", "", "9,605"],
["1263", "14", "1", "E", "marcost@hannover.com.br", "26/5/2006 00:00:00", "", "143"],
["1263", "15", "1", "E", "marcost@hannover.com.br", "26/5/2006 00:00:00", "", "2,3375"],
["1263", "14", "1", "E", "adfratucci@agf.com.br", "26/5/2006 00:00:00", "", "444,6"],
["1263", "15", "1", "E", "adfratucci@agf.com.br", "26/5/2006 00:00:00", "", "7,2675"],
["1263", "14", "1", "F", "IMCEAFAX-$§4471960126366100000014001§$+40050193200@agf.com.br", "26/5/2006 00:00:00", "", "503,1"],
["1263", "15", "1", "F", "IMCEAFAX-$§4471960126366100000015001§$+40050193200@agf.com.br", "26/5/2006 00:00:00", "", "8,22375"]];
var myColumns = ["Sinistro", "Carta", "Envio", "Tipo", "Endereço", "Dt. Pri. Envio", "Dt. Ult. Envio", "Valor"];
</script>



inside body tag:


<div style="margin-left: 5px; margin-top: 5px; width:890px; height:370px;">

<script>
var obj = new Active.Controls.Grid;
obj.setModel("row", new Active.Rows.Page);
obj.setProperty("column/texts", myColumns);
obj.setProperty("row/count", (myData.length-1));
obj.setProperty("column/count", myColumns.length);
obj.setProperty("data/text", function(i, j){return myData[i][j]});
obj.setProperty("row/pageSize", 10);
document.write(obj);
</script>

<div>
<a href=""><img alt="Primeiro" onclick='goToPage(-Infinity)' src="../../imagens/pag-primeira.gif" border="0" /></a>
<a href=""><img alt="Anterior" onclick='goToPage(-1)' src="../../imagens/pag-anterior.gif" border="0" /></a>
<span id='pageLabel'></span>
<a href=""><img alt="Próximo" onclick='goToPage(1)' src="../../imagens/pag-proxima.gif" border="0" /></a>
<a href=""><img alt="Último" onclick='goToPage(Infinity)' src="../../imagens/pag-ultima.gif" border="0" /></a>
</div>


</div>

Use

obj.setColumnValues();

to determine which columns are shown

setColumnIndices sets what columns are displayed
and then you can setCellText to set the display text of the first column.