Using container with AG grid

1

I’ve just starting using AG Grid as i was looking for a better performing grid especially for scrolling large data sets, and so far it is working really good. I prefer this over jqxGrid.

The only issue so far is with the grid replicating itself if i try draw the grid again. In the code below, I called the AG grid ‘myGridContainer’ and it is a container.
The grid is loaded when the button is pressed:

Button1.onclick = function() 
{       
    columnDefs = [
      {headerName: "Make", field: "make"},
      {headerName: "Model", field: "model"},
      {headerName: "Price", field: "price"}
    ];

   rowData = [];   
   for (let i = 0; i < 10; i++) 
   {
        row = [];
        row["make"] = "test";
        row["model"] = "test2";
        row["price"] = i;
        rowData[i] = row; 
   }

   gridOptions = {
     columnDefs: columnDefs,
     rowData: rowData
   };

   gridDiv = document.querySelector('#myGridContainer');
   agGrid.Grid(gridDiv, gridOptions);
  
};

The problem happens if the button is pressed more than once, then below happens (another grid is drawn):

ag_grid_issue
ag_grid_issue540×598 5.1 KB

Is there something i need to do with the container so that the grid doesn’t keep getting drawn again?

Thanks

2

I code in basic ,so for me,at the begining of button1.click…,

If b1ck = 0 then
b1ck = 1
Elseif b1ck = 1 then
Exit Sub
End if

Dim b1ck
blck = 0

As i am outdoor,i am no quite sure of capital letter or small letter,pls bear with me .best rdgs,tst

3

Thanks
I did something similar to what you did, and use

gridOptions.api.setRowData(rowData);

to update grid data