Home/ Questions/Q 7661363
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-31T13:35:18+00:00

I have this problem I’m using DataGrid + dojo.store.JsonRest as store. I want to

  • 0

I have this problem

I’m using DataGrid + dojo.store.JsonRest as store. I want to load only those items that are currenlty neccesary. So when I have 10000 items only ~ 100 is loaded initialy and the rest is downloaded as the user scrolls the grid.

I created two files

  1. datagridtest.php contains datagrid
  2. jsonsource.php implements test datasource (that should return no more that 499 records)

First 25 items is displayed fine. But when I try to scroll down datagrid dosn’t request new items – checked it with FireBug.

Please help. What Am i doing wrong.

Below is my code:

datagridtest.php:

<html><head>
    <link rel="stylesheet" type="text/css" href="../libs/dojo/dijit/themes/claro/claro.css" />
    <link rel="stylesheet" type="text/css" href="../libs/dojo/dijit/themes/style.css" />
    <script type="text/javascript">     djConfig = {parseOnLoad: true,} </script>
    <script type="text/javascript" src="../libs/dojo/dojo/dojo.js"></script>
</head>
<body class="claro">

<style type="text/css">
    @import "../libs/dojo/dojox/grid/resources/Grid.csss";
    @import "../libs/dojo/dojo/resources/dojo.csss";
    @import "../libs/dojo/dojox/grid/resources/claroGrid.css";
</style>

<script type="text/javascript">

    dojo.require("dijit.dijit");
    dojo.require("dojox.grid.DataGrid");
    dojo.require("dojo.data.ObjectStore");  
    dojo.require("dojo.store.JsonRest");

    var store, grid;
    dojo.ready(function() {  

        store = new dojo.store.JsonRest({
            target:"jsonsource.php",
            idProperty: "id"
        });     

        grid = new dojox.grid.DataGrid({
            store: dataStore = dojo.data.ObjectStore({ objectStore: store }),           
            structure: [
            {
                cells: [
                    [
                        { name: "Id", field: "id"},
                        { name: "Name", field: "name" },
                        { name: "E-Mail", field: "email", width: "200px"},
                    ]
                ]
            }
            ]
        }, "gridDiv");

        grid.startup();     
    } );

</script>

<div id="gridDiv"></div>
</body></html>

jsonsource.php:

<?php

$RangeTemp = explode("=", $_SERVER['HTTP_RANGE']);
$Range = explode("-", $RangeTemp[1]);
if ($RangeTemp[1] != "") {
    $RangeFrom = $Range[0];
    $RangeTo = $Range[1];
}

if ($RangeFrom > 500) { print "[ ]"; die(); }

?>
[
    <?php for($i=$RangeFrom; $i<=$RangeTo; $i++): ?>
        {
            "id": <?=$i; ?>,
            "name": "Jack <?=$i; ?>",
            "email": "jack@jacekplacek.pl"
        },
    <?php endfor; ?>
]
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    I believe you need to set the “Content-Range” header to let Dojo know what records you’ve returned, and how many there are total.

    Set the header like this:

    header("Content-Range: items 0-24/10000");

    In your case, you would write this:

    header("Content-Range: items $RangeFrom-$RangeTo/$total");

    Hope that helps.

    • 0