Refreshing Dojogrid

I have this grid which displays some data, that is retrieved from database. I am retrieving the data as a JSON string which comes in the form :: [{'ActID':16,'Assigned To':'Anand'

Solution 1:

You get this error because you are trying to create new grid widget each time button is clicked. There are 2 possible solutions: manually destroy existing widget, or create only one instance of grid widget and reuse it.

I think, you don't need to recreate your grid every time data is received from the server. I suggest you to move all your grid initialization logic (including structure, but except store assignment) into new method like initGrid, that will create empty grid. And call it one page load:

  dojo.ready(function() {
    initGrid();
  });

Then, when data received from the server, you can initialize data store and update grid (adjust your postToPage function):

  function postToPage(data){
    var storedata = {
      identifier:"ActID",
      items: data
    };
    var store1 = new dojo.data.ItemFileWriteStore({data: storedata}) ;
    var grid = dijit.registry.byId("gridDiv");
    grid.set("store", store1);
    grid.filter();
  }

This should work. Also I suggest you not to use inline CSS styles and center tag.

Update:

You don't need to connect to onRowClick event each time data is updated, so it should be done in initGrid too.

Your initGrid method should look like this:

functioninitGrid() {
    var gridStructure =[[
    // declare your structure here
    ]];

    var grid = new dojox.grid.DataGrid({
      structure: gridStructure,
      rowSelector: '30px',
      selectionMode: "single",
      autoHeight:true,
      columnReordering:true
    },'gridDiv');


    dojo.connect(grid, "onRowClick", grid, function(){
      // onRowClick handler
    });

    grid.startup();
  }