Question

I’m trying to get dgrid to work with JsonRest. I’ve implemented a Perl based server-side component that issues the JSON data back. The response data looks like this:

{"id:": 00016, "num": 00016, "range": "15 - 63 (49)", "uid": "0", "ipaddress": "xx.xx.xx.xx", "hostname": "", "referer": "http:\/\/www.facebook.com\/l.php?u=http%3A%2F%2Fasisaid.com%2Fjournal%2Farticle%2F1604.html&h=8e20f", "useragent": "Mozilla/5.0 (Windows; U; Windows NT 6.1; en-US; rv:1.9.2.8) Gecko/20100722 Firefox/3.6.8", "date":1281010282000}

Each of those hash “rows” is within an array. When the dgrid loads, it queries the server component without a Range header and the server component returns a default range of data. Then, dgrid queries again with “Range: items=0-24.” In response the server provides entries 1-25 in the format listed and with the response header “Content-Range: items 0-24/470.”

The problem emerges when the dgrid requests the next 40 items. It requests “Range: items=23-63” and the server successfully fulfills the request (I can see it using the WebKit developer tools, which show the data has been retrieved). However, when I scroll through the dgrid itself, I see rows 1-25 and then it jumps to row 40. If I keep scrolling, it continues to work towards loading all 470 entries, but the grid starts shifting around and the rows get dramatically out of order (for example, the grid starts with row 8 and row 1 shows up after row 75).

I thought it was perhaps because my JSON data didn’t include a definitely unique ID, so I added one (“id”) with the idProperty setting. No go. I also tried adding 10 rows of overlap to see if that would help, but that seemed to only make things worse.

Here’s my Dojo code:

require(["dojo/_base/declare", "dojo/store/JsonRest", "dojox/data/QueryReadStore", "dgrid/OnDemandGrid", "dgrid/Keyboard", "dgrid/Selection", "dojo/domReady!"], function(declare, JsonRest, QueryReadStore, OnDemandGrid, Keyboard, Selection){


 var store = new JsonRest({
   target: "perlsqllog2.pl",
   sortParam: "sort",
   idProperty: "id"
 });



var grid = new declare([OnDemandGrid, Keyboard, Selection])({
    store: store,
    query: {aid: "1604" },
    queryRowsOverlap: 10,
    columns: {
        num: "ID",
        range: "Debug",
        uid: "SAFARI User ID",
        ipaddress: "IP Address",
        date: "Date"
    },
}, "grid");

});

Answer 1

As it turns out, I had a typo in my JSON data. I had it output “id:” in the JSON rather than “id” and that was preventing the grid from seeing it as the unique id. Apparently, dgrid does require a unique id to work and it seems to be working happily now that a unique ID is being provided.