Refreshing gridx with server-side data

Question

I'm thinking that I am overlooking something simple - I am so close to making this work. :)

I have a grid that needs to be updated with server information.

Here is the way that it should work:

1. A user selects an item
2. Make a JsonRest query with the item ID selected
3. Update the grid - showing notes relating to item selected

Here is how the grid is setup:

function noteTabSetup() {

var store = JsonRest({target:"//localhost/program/notes", idAttribute:"id"});

var structure = [{ field: 'id', name: 'Id', width: '5em' },
         { field: 'name', name: 'Name', width: '12%' },
         { field: 'description', name: 'Description' }];

var noteGrid = new Grid({
  id: 'noteGrid',
  pageSize: 20,
  store: store,
  cacheClass: Cache,
  structure: structure,
  filterServerMode: true,
  selectRowTriggerOnCell: true,
  bodyLoadingInfo: "Loading notes ...",
  bodyEmptyInfo: "No notes found",
  modules: [SingleSort, VirtualVScroller, moveColumn,
    selectColumn, dndColumn, selectRow, Filter]}, noteTab);

noteGrid.startup();

When an item is selected, the selected item ID is passed to:

function noteLoad(itemId) {
 console.log("In NoteLoad");
 var grid = registry.byId("noteGrid");

 if (!itemIds || 0 === itemIds.length) { console.log("no ItemId chosen"); }
 else {
  console.log("In NoteLoad with an itemId");

  grid.model.clearCache();

  // Error on second run
  grid.store.query({ find: "ByItem", item: itemId }).then(function(result) {
    grid.setStore(new ItemFileReadStore({data: {items : result}}));
  }); 

  grid.body.refresh();
  console.log("model: " + grid.rowCount());
 };
};

On the first item selected, everything works well - the query fires, and the grid is updated with notes related to the selected item. On the second item selected, I receive this error from firebug:

TypeError: grid.store.query is not a function
grid.store.query({ find: "ByItem", item: itemIds }).then(function(result) {
-----------------------------------^

Any ideas?! Thank you in advance. Chris

---

Thank you for the reply - that makes sense that store was being replaced by ItemFileReadStore. If possible, I would like to use JsonRest directly to update the grid.

I've tried a handful of variations based off of your comment, without luck:

Query fires and result is returned. Grid is not updated:

grid.model.clearCache();
grid.store.query({ find: "ByItem", item: itemIds }).then(function(results){
  console.log('notes: ' + results[0].name);
});
grid.body.refresh();

Error: grid.store.fetch is not a function:

grid.store.fetch({ query: { find: "ByItem", item: itemIds }});

Syntax error in Dojo.js (line 15):

grid.store.query({ find: "ByItem", item: itemIds }).then(function(result) {
  grid.setStore(new JsonRest({data: {items : result}}));
});

I've done a lot of searches and can't find a good example where the grid is being updated from a JsonRest object. Thank you.

Answer 1

Because the code itself replaces the store the first time.

grid.store.query({ find: "ByItem", item: itemId }).then(function(result) {
  grid.setStore(new ItemFileReadStore({data: {items : result}}));
});

Here, the grid's store is initially JsonRest store, which after the query method is run, is replaced by the new ItemFileReadStore object. The mistake here is "query" is not a method of ItemFileReadStore, but the parameter passed to the "fetch" method. Check out some examples from dojo documentation on this.

On the other hand, JsonRest store has the method "query". Hence the contradiction. Change your code accordingly if you want ItemFileReadStore.

eg:-

store.fetch( { query: { name: 'Ice cream' },  
               onItem: function(item) {
                  console.log( store.getValue( item, 'name' ) );
                  console.log( 'cost: ', store.getValue( item, 'cost' ) );
               }
});