dojo lazytreegrid data from server

Question

I am new to dojo, and I am trying to use lazytreegrid, I found this example code in the documentation

http://dojotoolkit.org/reference-guide/1.7/dojox/grid/LazyTreeGrid.html

But I want to load the tree data from a servlet/portlet/ from java, and child nodes should be lazy loaded. Not able to find any simple example which shows show this can be done

Answer 1

I have modified the example available at http://dojotoolkit.org/reference-guide/1.9/dojox/grid/LazyTreeGrid.html to make it work with QueryReadStore which fetches data from a backend service in JSON format.

My sample service returns data in the following format:

{"identifier":"id","label":"name","items":[{"name":"Africa","id":1,"type":"CONTINENT","population":null,"area":null,"hasChildren":true},{"name":"Asia","id":8,"type":"CONTINENT","population":null,"area":null,"hasChildren":true}]}

Note that unlike the ItemFileWriteStore example, the children element are not populated inline.

Now the Web page code :

// Dependencies
dojo.require("dojox.grid.LazyTreeGrid");
dojo.require("dojox.grid.LazyTreeGridStoreModel");
dojo.require("dojox.data.QueryReadStore");
.
.
.
// Use QueryReadStore instead of ItemFileWriteStore.
// The URL points to a service that returns root nodes of the tree in JSON format.
// When a node is expanded, the same URL gets called with an extra parameter 
// called parentId=<id> where id is identifier of the clicked row. The service
// should return children of the specified id.
var store = new dojox.data.QueryReadStore({url: "./admin/getRootNodes.json",
             requestMethod: "get" });

// hasChildren field in the JSON response should be boolean (true - has children, false otherwise)
var model = new dojox.grid.LazyTreeGridStoreModel({
      store: store,
      serverStore: true,
      childrenAttrs: ['hasChildren']
    });

/* set up layout */
var layout = [
  {name: 'Name', field: 'name', width: '30%'},
  {name: 'Type', field: 'type', width: '30%'},
  {name: 'Area', field: 'area', width: '20%'},
  {name: 'Population', field: 'population', width: '20%'}
];
/* create a new grid: */
var grid = new dojox.grid.LazyTreeGrid({
    id: 'grid',
    treeModel: model,
    structure: layout,
    rowSelector: '20px',
  }, document.createElement('div'));

/* append the new grid to the div */
dojo.byId("gridDiv").appendChild(grid.domNode);

/* Call startup() to render the grid */
grid.startup();

Answer 2

FIRST:

Your Servlet has to output something in a json / xml format and provide this as a weburl.

For example the url http://api.geonames.org/citiesJSON

outputs:

{"status":{"message":"Please add a username to each call in order for geonames to be able to identify the calling application and count the credits usage.","value":10}}

Your servlet should have the same behaviour (not the same data of course) when you access the url in your webbrowser.

NEXT:

Use the grid with JsonRestStore as a store, not with ItemFileWriteStore. My example uses DataGrid, but LazyTreeGrid should work kind of the same way with the JsonRestStore...

require(["dojo/ready","dojo/aspect",'dojo/_base/lang', 'dojo/topic', 'dojox/grid/DataGrid'  ,'dojo/store/JsonRest','dojo/data/ObjectStore'],
  function(ready,aspect,lang,topic, DataGrid, JsonRest,ObjectStore){

    ready(1,function() {

    var store = new JsonRest({  
            target: "http://yourUrl",
            sortParam: "sortby"
      });


    var layout = [[
    {'name': ' ', 'field': 'extension', 'width': '20px',noresize:true} // Adapt field to json data

    ]];

 var dataStore=ObjectStore({objectStore: store});

        var grid = new DataGrid({
            store:dataStore,
            queryTarget:"objectId",
            structure: layout});

    grid.setQuery({objectId:"1"}); // First QUERY !
    grid.placeAt("myDivId");
    grid.startup();

    });

});