OnDemandGrid (Dgrid) won't fire a request (for new data) on scroll down

Question

Allright, I have been able to make it work with DataGrid, but for some reason, Dgrid can be really impressing and at the same time, really frustrating (many people recommend it). So far, I have been able to request a certain amount of data (only first call, so my request header specifies to return 25 items...), once I try to scroll down to have more item (so additional request should be sent) nothing happens.

Basically that's the store build with jsonrest:

define([
    "dojo/store/Memory",
    "dojo/store/JsonRest",
    "dojo/store/Cache",
    "dojo/store/Observable"
    ],
function(
    Memory,
    JsonRest,
    Cache,
    Observable
){

    var contentMemoryStore = new Memory();
    var contentJsonRestStore = new JsonRest({target: "http://dev.mpact.tv:30087/rest/contenus/"});

    contentStore = new Cache(contentJsonRestStore, contentMemoryStore);

    return new Observable(contentStore);
});

And then, I pass this store to the property of the OnDemandGrid.

I have checked this guy example: http://www.speich.net/articles/demos/jsonrest/dojo-demo-dgrid.php I have checked the documentation for dgrid (OnDemandList): https://github.com/SitePen/dgrid/wiki/Core-Components

Added Request header / Response header (but I think they are correct): enter image description here

Server side code (in perl):

$r->headers_out->set('Content-Range', sprintf("items %d-%d/%d", $start, $start 
+ $num_items - 1, $total));

Update:

I did a quick test with the old jsonstore (dojox/data):

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
    <head>
        <title>Statut des canaux générés par Gipsy</title>
        <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"></meta>
        <style type="text/css">
            @import "/dojo/dojo/resources/dojo.css";
            @import "/dojo/dijit/themes/tundra/tundra.css";
            @import "/dojo/dojox/grid/resources/Grid.css";
            @import "/dojo/dojox/grid/resources/tundraGrid.css";
            //.grid {
            //    width: 70em;
            //    height: 40em;
            //}
            .Title { text-align: center }
            html, body { height: 100%; margin: 0px; font-size: 14px; }
        </style>
        <script type="text/javascript" src="/dojo/dojo/dojo.js"  djConfig="isDebug:false, parseOnLoad: false"></script>
        <script type="text/javascript">
            dojo.require("dijit.layout.BorderContainer");
            dojo.require("dijit.layout.ContentPane");
            dojo.require("dojox.grid.TreeGrid");
            dojo.require("dijit.tree.ForestStoreModel");
            dojo.require("dojox.data.JsonRestStore");
            dojo.require("dojo.parser");

            dojo.addOnLoad(function(){

                dojo.parser.parse();

                var layout = [
                    { name: "Dossier", field: "repertoire", width: "auto" },
                    { name: "Fichier", field: "fichier", width: "auto" },
                    { name: "Nom", field: "nom", width: "auto" },
                    { name: "Date", field: "date", width: "auto" }
                ];
                //var jsonStore = new dojo.data.ItemFileReadStore({ data: dataItems });
                //var jsonStore = new dojo.data.ItemFileReadStore({ url: "/cgi-bin/senscity/stingray.json", clearOnClose: true });
                var jsonStore = new dojox.data.JsonRestStore({idAttribute: 'id', target: 'http://dev.mpact.tv:30087/rest/contenus'});
                var treeModel = new dijit.tree.ForestStoreModel({
                    store: jsonStore,
                    query: { type: 'canal' },
                    rootId: 'canalRoot',
                    rootLabel: 'Banane',
                    childrenAttrs: ['children']
                });
                var grid = new dojox.grid.TreeGrid({
                    treeModel: treeModel,
                    structure: layout,
                    selectable: true,
                    defaultOpen: false
                }, 'programmatic_grid');
                grid.startup();
                dojo.connect(window, "onresize", grid, "resize");
            });
        </script>
    </head>
    <body class="tundra">
<!-- -->
        <h1 class="Title" style="margin-bottom: 0.5em;">Statut de la programmation</h1>
        <div dojoType="dijit.layout.BorderContainer" style="width: 100%; height: 100%;">
<!--
            <div dojoType="dijit.layout.ContentPane" region="top" style="height: 20pt; padding: 0px; border: 0px;">
            date de dernière mise à jour, décompte de prochaine mise à jour, bouton de mise à jour, case de désactivation de mise à jour automatique
            </div>
-->
            <div dojoType="dijit.layout.ContentPane" region="center">
<!-- -->
                <div id="programmatic_grid"></div>
<!-- -->
            </div>
<!-- -->
        </div>
    </body>
</html>

So, My guess it has to be the store or the grid.

Can you post an example HTTP Response from your initial Store? The JsonRest Store depends on certain HTTP Headers being set for the virtual paging — BuffaloBuffalo, Jul 26 '12 at 19:30
Do you see additional http requests when scrolling done? Can you paste the code for the grid creation (I understand the code at the bottom is an old one)? — unludo, Jul 27 '12 at 09:10

score 5 · Answer 1 · answered Jul 26 '12 at 19:52

Notice on the Request there is an HTTP Header Range. This indicates what items are being requested. Then on the response, you need to be including a Content-Range header that describes what items are being returned and the total avaialable.

Your Response includes the header:

Content-Range: items=0-24/123456

It looks like the format needs to be:

Content-Range: items 0-24/66

From the JsonRest Documentation:

Paging

JsonRest store uses HTTP’s Range header to perform paging. When a request is made for a range of items, JsonRest will include a Range header with an items range unit specifying the range:

Range: items=0-24
On your server, you should look at the Range header in the request to know which items to return. The server should respond with a Content-Range header to indicate how many items are being returned and how many total items exist:

Content-Range: items 0-24/66

Oh wow. Such a tiny thing I didn't see lol. But still, my dgrid just render the 25 items. — fneron, Jul 26 '12 at 20:06
I get this kind of error... Refused to get unsafe header "Content-Range" — fneron, Jul 26 '12 at 20:24

score 3 · Accepted Answer · answered Jul 27 '12 at 17:11

I forgot to mention I was doing cross-domain request with my rest framework (maybe should of said it...).

Found out after 2 days, that this was the cause of my problem (I still don't know the reason or the source). When I migrated my code to the server everything was working properly. Did a simple little test on my php server to populate a onDemandeGrid and saw that it was working on my localhost!

Plus, to bypass the cross-domain, I added this header on my server-side rest code (to continue developing on a cross-domain, until we have a decent dev environment):

Access-Control-Expose-Headers:Content-Range

Ah, I never even thought of cross domain issues. That definitely explains the `Refused to get unsafe header "Content-Range"` error. — BuffaloBuffalo, Jul 30 '12 at 12:33

OnDemandGrid (Dgrid) won't fire a request (for new data) on scroll down

2 Answers2