So I am trying to refresh a Datagrid when stores data changes.

//Store for my datagrid
var myStore= new dojo.data.ItemFileWriteStore({ url : '/my/store.html', clearOnClose:true, urlPreventCache:true } );

When I make an ajax call to save/update data for the grid, in callback function of ajax call I call:

function myCallBack() 
{
myStore.close();
Alert("Data Saved Successfully");
}

The function that updates the records in Grid, calls myStore.save() right before exiting. This scenario works fine in FireFox but grid is not refreshing in IE8

Any pointers or help is much appreciated.

So I am trying to refresh a Datagrid when stores data changes.

//Store for my datagrid
var myStore= new dojo.data.ItemFileWriteStore({ url : '/my/store.html', clearOnClose:true, urlPreventCache:true } );

When I make an ajax call to save/update data for the grid, in callback function of ajax call I call:

function myCallBack() 
{
myStore.close();
Alert("Data Saved Successfully");
}

The function that updates the records in Grid, calls myStore.save() right before exiting. This scenario works fine in FireFox but grid is not refreshing in IE8

Any pointers or help is much appreciated.

• javascript
• dojo

2 Answers 2

Ok I found the solution. You first need to close the store on your grid:

myGrid.myStore.close();

Then set the store back to the grid with new data:

myGrid.setStore(newStoreData);

For more information, follow this

You can also reset the query in order to execute it again. Follow the tutorial in order to set up the page: http://dojotoolkit/documentation/tutorials/1.7/store_driven_grid/

in the example datagrid with an in memory store:

  require( ["dojox/grid/DataGrid", "dojo/data/ObjectStore", "dojo/store/Memory", "dojo/domReady!"],

          function ( DataGrid, ObjectStore, Memory ) {
             var formsList = [
                {id:1, name:"Jim", department:"accounting"},
                {id:2, name:"Rosenblumentalovitsch", department:"engineering"},
                {id:3, name:"Mike", department:"sales"},
                {id:4, name:"John", department:"sales"}
             ];
             formStore = new Memory( {data:formsList, idProperty:"id"} );

             formGrid = new DataGrid( {
                store:dataStore = ObjectStore( {objectStore:formStore} ),
                query: {id: "*"} ,
                structure:[
                   { name:"Form", field:"name", width:"100%" }
                ]
             }, "grid" );
             formGrid.startup();
          } );

when adding an element to the formStore the data grid is not automatically refreshed. Here is the addForm function with the refresh:

function addForm( evt ) {
   // set the properties for the new item:
   var myNewItem = {id:5, name:"Jim 2", department:"accounting"};
   // Insert the new item into the store:
   formStore.add( myNewItem );
   formGrid.setQuery({id: "*"}); //this row executes the query again, thus refreshing the data grid
}