OnDemandGrid (Dgrid) won't fire a request (for new data) on scroll down
https://stackoverflow.com//questions/11675976
-
12-12-2019 - |
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
RussianQuestion
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):
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.
Solution 2
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
OTHER TIPS
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
