A dgrid row disappears when sorting

Question

I've implemented the dgrid. It's really neat. However when I click on the row header to sort, all but one row disappears. I'm going nuts trying to figure out why....

Let's give this a go.

DGrid, it's a dojo based data grid, see http://dojofoundation.org/packages/dgrid/

When using this with Javascript and HTML and connecting to an Observable MemStore, the grid populates, with several rows quite happily displaying data. The columns are sortable, that is you can click on the the row/column heading. However - and here's the problem - when clicking on these row/column headers to sort the row's, all but one row disappears.

Using a Memory (dojo/store/Memory) a the dGrids data store work fine - ie the rows sort successfully. However when using the Observable (dojo/store/Observable) as a data store the sort causes the rows to collapse. Please see below examples.

Sort working great with Memory:

function populateGrid(Memory, message) {
               var featureOne = {
                      "id": message[0].attributes["id"],
                      "Col2": message[0].attributes["Col2"],
                      "Col3": message[0].attributes["Col3"]
                  }
                var featureTwo = {
                      "id": message[1].attributes["id"],
                      "Col2": message[1].attributes["Col2"],
                      "Col3": message[1].attributes["Col3"]
                  }

                  var data = [feature1, feature2];
                  var memStore = new Memory({ data: data });
                  window.queryRecordsGrid.set("store", memStore);
              }

The error occurs when using Observable:

 var memStore;

 function populateGrid(Memory, message) {
                   var feature = {
                          "id": message[0].attributes["id"],
                          "Col2": message[0].attributes["Col2"],
                          "Col3": message[0].attributes["Col3"]
                      }

                     var data = [feature];
                     if (!window.memStore) {
                  window.memStore = new Observable(new Memory({ data: data }));
                  window.grid.set("store", window.memStore);

              } else {

                  window.grid.store.notify(feature, feature.id);

              }
                  }

Not really. It's still just a verbal description. Please include the [relevant parts of the code](http://stackoverflow.com/help/mcve) and explain what you're trying to accomplish and how your results differ from the desired results. Include any error messages you receive. Please read this advice on [ask] good questions and Jon Skeet's blog post [Writing the perfect question](http://msmvps.com/blogs/jon_skeet/archive/2010/08/29/writing-the-perfect-question.aspx). Pay special attention to the "Golden Rule", though I highly advise you to read the entire article. — Adi Inbar, Apr 22 '14 at 21:31

score 0 · Answer 1 · answered Apr 23 '14 at 20:05

This might or might not be your issue, but currently the items in your store don't have unique identifiers - or if they do, they're not being picked up by the store correctly. dojo/store/Memory defaults to assuming that store items each have a unique id. If you have another field which provides unique identifiers, you can make Memory aware of this by setting idProperty, e.g.:

new Observable(new Memory({ idProperty: "Col1", data: data }));

You also seem to be assuming that feature.id exists when you call notify but as far as I can tell from your code, it doesn't exist.

Thanks Ken. The above code was a bit contrived - I've edited now. I'm using "id" for the unique id in the grid and store. I should also note that the onDemandGrid is being used. I've used the Observable as a "global" variable as I'm using Web Sockets to push items to the gird as they arrive - which works real well (besides the rows collapsing on sort) — Dazxa, Apr 23 '14 at 21:19

A dgrid row disappears when sorting

1 Answers1