Please help me find a solution!

Hi,

I'm trying to update a grid, i.e. Add a new line from fields on the form, using grid.Refresh() and I can't get it to work.

The code I have is follows:

<div id="barButtons">
<button id="btnAdd" onclick='addLineAJM()'>Add Line</button>
<button id="btnUpdate">Update Line</button>
<button id="btnRemove">Remove Line</button>
<button id="btnShowData" onclick='alert(lineData)'>Show Data</button>
</div>


<script type="text/javascript">
var lineData = [
["A","B","C","D","E","F","G"]
]
var lineColumns = [
"Line Number", "Item Code", "Product Description", "Quantity", "Unit Price", "Amount", "UNID"
]
var gridLines = new Active.Controls.Grid;
gridLines.setId( "linesGrid" );
gridLines.setRowProperty( "count", lineData.length);
gridLines.setColumnProperty( "count", 7 );
gridLines.setDataProperty( "text", function( i, j ){return lineData[i][j] } );
gridLines.setColumnProperty( "text", function( i ){ return lineColumns[i] } );
gridLines.setRowHeaderWidth("28px");
gridLines.setColumnHeaderHeight("20px");
gridLines.sort( 0, "ascending" );
document.write( gridLines );

function addLineAJM()
{
gridLines.setRowProperty("count", gridLines.getRowProperty("count") + 1);
lineData[lineData.length] = ["1", "1","1","1","1","1","1"];
gridLines.setDataProperty( "text", function( i, j ){return lineData[i][j] } );
gridLines.refresh();
}
</script>


As you can see, i've hard-coded the lines to be entered for the mean time, and when I click the "Show Data" button, the data has been added to the array ok (or I think it has).

i've tryed the following:

function addLineAJM()
{
rowData = ["1", "1","1","1","1","1","1"];
lineData.unshift(rowData);
gridLines.setRowProperty("count", 2);
gridLines.refresh();
}

and the data in the first line changes, but the second line (with the original data) is not shown.

Again, the data is added to the array (at the front), but the line count doesn't seem to update.

Can someone point me in the right direction please?

I have found that with many of the Array functions, you have to update the length of the array manually. I have done this sort of thing before and it worked:

lineData[lineData.length] = ["1", "1","1","1","1","1","1"];
lineData.length++;

Then the array length is accurate and the rest of your stuff should work. The grid only displays the number of rows you tell it to. So if the array has 10 rows but you are setting the rowcount of the grid to 4 (due to incorrect length values) then the grid will only show 4 rows. Check this out in your code, make sure that you are getting the correct length values where you are using them.

try using this

function addLineAJM(){

var rowData = ["1", "1","1","1","1","1","1"];

lineData.unshift(DataToAdd); 
gridLines.setRowProperty("count", lineData.length);
gridLines.refresh();

}

i hope that would do ....

Found it!!!

The line --> gridLines.sort( 0, "ascending" ); was stopping it working!