How to refresh datagrid
Asked Answered
C

6

8

I create dojox.grid.datagrid and I fill content from array like on example last example on page. During time, I change value of that array in code. How to refresh content of that grid ? How to load new data from changed array ?

Curvet answered 31/3, 2011 at 11:58 Comment(0)
G
22

To change values in the grid, you will need to change the value in the grid's store. The grid data is bound to the store data, and the grid will update itself as needed.

So the key is to understand Dojo's data api and how stores work in Dojo. Rather than manipulating the data directly in the grid, manipulate it in the store.

Ideally, the store is your array that you manipulate as the application runs and you should not be needing to sync the array to the grid. Just use the ItemFileWriteStore as your data holder unless thats not possible.

Also, using the dojo data identity api makes it much simple to find items in the grid if that is possible. Assuming you know when an item is updated, deleted, or changed in your application you should be able to modify the grid store as needed when the action happens. This is definitely the preferred approach. If you can't do that you will have to do a general fetch and use the onComplete callback to manually sync your arrays which will be very slow and won't scale well, in which case you may as well just create a new store all together and assign it to the grid with grid.setStore(myNewStore)

Here is a fiddle with a basic create, update, and delete operation: http://jsfiddle.net/BC7yT/11/

These examples all take advantage of declaring an identity when creating the store.

var store = new dojo.data.ItemFileWriteStore({
    data: {
        identifier : 'planet',
        items: itemList
    }
});

UPDATE AN EXISITNG ITEM:

//If the store is not in your scope you can get it from the grid
var store = grid.store;
//fetchItemByIdentity would be faster here, but this uses query just to show 
//it is also possible
store.fetch({query : {planet : 'Zoron'},
             onItem : function (item ) {

                  var humans = store.getValue(item, 'humanPop');
                  humans += 200;
                  store.setValue(item, 'humanPop', humans);

              }
        });

INSERT A NEW ITEM:

store.newItem({planet: 'Endron', humanPop : 40000, alienPop : 9000});
               } catch (e) { 
                  //An item with the same identity already exists
               }

DELETE AN ITEM:

store.fetchItemByIdentity({ 'identity' : 'Gaxula',  onItem :  function (item ) {
    if(item == null) {
         //Item does not exist
    } else {
        store.deleteItem(item);
    }
}});
Gilboa answered 31/3, 2011 at 23:25 Comment(0)
S
7

The following code snippet can be used to update the grid:

var newStore = new dojo.data.ItemFileReadStore({data: {... some new data ...});
var grid = dijit.byId("gridId");
grid.setStore(newStore);

EDIT:

Dogo data grid reference guide (add/remove rows example, updating grid data examples )

Swaraj answered 31/3, 2011 at 13:14 Comment(0)
F
3

(I suppose you already have a working grid and you want to completely change the grid's store)

  1. Create a new datastore with your new value :

    dataStore = new ObjectStore({ objectStore:new Memory({ data: data.items }) });
    

    (data is the reponse from an ajax request for me)

  2. Change your grid's store with the new one :

    grid.store = dataStore;
    
  3. Render :

    grid.render();
    
Frijol answered 8/1, 2013 at 15:59 Comment(0)
H
3

This Will update Grid Store and refresh the View of the Grid in latest Version of Dojo 1.9

grid.store = store;
grid._refresh();
Hibbs answered 14/5, 2014 at 11:29 Comment(0)
Y
1

I had a server-side filtered EnhancedGrid, which was refreshing happily by changing the store, and shown in the other answers.

However I had another EnhancedGrid that would not refresh when a filter was applied. It may have been to do with the fact it was filtered client side (but data still coming from server using JsonRest store), but I don't really know the cause. Eitherway, the solution was to refresh with the following code:

grid.setFilter(grid.getFilter());

It's hacky and strange, but if it all else fails...

Yeaton answered 15/7, 2014 at 4:31 Comment(0)
P
0

with this i can update a specifi row. this example is for a treegrid.

var idx = this.treeGrid.getItemIndex(item);
                                    if(typeof idx == "string"){
                                        this.treeGrid.updateRow(idx.split('/')[0]);
                                    }else if(idx > -1){
                                        this.treeGrid.updateRow(idx);
                                    }   
Pressmark answered 16/8, 2012 at 12:7 Comment(0)

© 2022 - 2024 — McMap. All rights reserved.