Cannot add/delete

I have two grids, each within their own iframe. I'm trying to copy a row from one to the other.

So far, I have this.

Grid1.html/Grid2.html(Both are identicle, just in different frames)

var TestData = [

  ['4', 'Fonts', 'ThisOne', 'Need to add this package', '1.2.0']

  ];

  var TestHeader= ['ID', 'Type', 'Name', 'Description', 'Version'];

  var TestGrid= new AW.UI.Grid;

  TestGrid.setId("Test");

  TestGrid.setCellText(testData);

  TestGrid.setHeaderText(testHeader);

  TestGrid.setHeaderCount(1);

  TestGrid.setColumnCount(5);

  TestGrid.setRowCount(1);

  TestGrid.setColumnIndices([1, 2, 3, 4]);

  TestGrid.setSelectorVisible(true);

  TestGrid.setSelectorText(function(i){return this.getRowPosition(i)+1});

  document.write(TestGrid);

I also created these functions to be used:

function Add(GridId, Row)

{

    var RowCount = eval(GridId + 'Grid.getRowCount();'); 



    eval(GridId + 'Data.push(Row);'); 

    eval(GridId + 'Grid.addRow(RowCount);');

    eval(GridId + 'Grid.refresh();');

}



function Delete(GridId, All)

{

    var CurrentRow = GetGridRow(GridId);

    eval(GridId + 'Data.splice(CurrentRow);');

    eval(GridId + 'Grid.deleteRow(CurrentRow);');

}



function Copy(GridId, All)

{

    var CurrentRow = GetGridRow(GridId);

    return eval(GridId + 'Data[CurrentRow];');

}



function GetGridRow(GridId)

{  

    return eval(GridId + 'Grid.getCurrentRow();');

}

Here's the main page:
Main.html

<iframe id="FrameFrom" name="FrameFrom" src="Grid1.html" frameborder="0"></iframe>

    <div class="DualSelectButtons">

      <input type="button" name="AddButton" value="Add &gt;" onclick="DualAdd('Frame', 'Test');">

      <input type="button" name="RemoveButton" value="&lt; Remove" onclick="DualRemove('Frame', 'Test');">

    </div>

    <iframe id="FrameTo" name="FrameTo" src="Grid2.html" frameborder="0"></iframe>

Along with these functions:

function DualAdd(Id, SelectId)

{

    var DualSelect = GetDualToFrom(Id);

    

    var Data = DualSelect.From.Copy(SelectId);

    DualSelect.To.Add(SelectId, Data);

    DualSelect.From.Delete(SelectId);

}



function DualRemove(Id, SelectId)

{ 

    var DualSelect = GetDualToFrom(Id);

    

    var Data = DualSelect.To.Copy(SelectId);

    DualSelect.From.Add(SelectId, Data);

    DualSelect.To.Delete(SelectId);

}



function GetDualToFrom(Id)

{

    var DualSelect = new Object();

    DualSelect.From = GetFrameDocument(Id + 'From');

    DualSelect.To = GetFrameDocument(Id + 'To');

    

    return DualSelect;

}



function GetFrameDocument(FrameId)

{

    var Frame = document.getElementById(FrameId);

    var FrameContent;

    

    if (Frame.contentWindow)

        FrameContent = Frame.contentWindow;

    else

        FrameContent = Frame.contentDocument;

        

    return FrameContent;

}

Everything works fine when moving one row from one list to the other, but when trying to a row back, it just removes the row, but does not update the other grid.

Are there any suggestions?? Did I miss something?

Any help would be great, thanks!

Forum search