DOJO: lazy boot nodes in LazyTreeGrid - search for sample code

Question

I'm looking for an example of using QueryReadStore (or another store) with dojox.grid.LazyTreeGrid?

I want to be able to display large structures and load only the required data from the server. Only children of open nodes should be loaded from a dedicated script server.

I already use QueryReadStore with dojox.grid.DataGrid and it works fine :)

Help, thanks.

Answer 1

Here is a long explanation / sample based on some of the things I'm doing right now. This assumes basic comfort with Dojo 1.7 packages (for example, we assume that the default Dojo packages are configured correctly).

Client side (js file)

require(["dojo/ready", "dojox/grid/LazyTreeGridStoreModel", "dojox/data/QueryReadStore", "dojox/grid/LazyTreeGrid"], function(ready, LazyTreeGridStoreModel, QueryReadStore, LazyTreeGrid) { ready(function() { var cellLayout = [ {name: 'Name of fruit', field: 'name', width: '300px', defaultValue: ""}, {name: 'Color of fruit', field: 'color', width: '100px', defaultValue: ""}, {name: 'Size of fruit', field: 'size', width: '100px', defaultValue: ""} ]; // This is the url on which your server will listen for GET requests var dataStore = new QueryReadStore({url: "url/to/load/rows"}); var treeModel = new LazyTreeGridStoreModel({store: dataStore, childrenAttrs: ['children'], serverStore: true}); var grid = new LazyTreeGrid({ treeModel: treeModel, structure: cellLayout, autoHeight: 20}, "gridContainerId"); // you need to have a DOM element by that id grid.startup(); } }); 

server side:

You need a server handler that will listen for GET requests on url/to/load/rows . These queries will have up to 3 parameters:

 start - 0-based index of the first item to return count - number of items to return parentId - Id of the parent of the children items that are requested. Optional, not present for 1st call (because 1st-level objects have no parents). 

This handler can be written in your favorite server language (i.e. C # with ASP.Net MVC, Ruby, etc.)

The work of your server handler will be to return a json structure containing the following 3 attributes:

 items - Array containing the items you want to display. Each item represents a row in the grid. Each item should have at least some of the fields you specified in your layout and must have the 2 following characteristics: - Must have a "children" attribute. That is a bool value. If true, the row is assumed to have children and will have an expando left of it. The grid query the server for children when you expand it. If false, the row is considered terminal, no expando is shown. - Must have a unique id. This will be the id that will be set in the "parentId" param when querying the server for the children of that row. It must be stored in the field referred to by the "identifier" attribute (see below). identifier - The name of the attribute of each item that contains its unique id. numRows - The number of total items existing on this level (not just the number of items you sent back). This is used to set the grid & scrollbar size and other UI things. 

Client / Server Communication

To build on my previous example, once the grid is up (on the client side), it will ask for something like:

 GET url/to/load/rows?start=0&count=25 

The server will return the following:

 { "items":[ {"name": "apple", "color": "red", "size": "small", "uniqueId":"a1", "children": true}, {"name": "watermelon", "color": "green", "size": "big", "uniqueId":"b1", "children": false} ], "identifier": "uniqueId", "numRows":2 } 

The grid will display 2 fruits. apple will have an extension, but not watermelon (due to the children attribute). Suppose a user clicks on apple expando. The grid will ask your children:

 GET url/to/load/rows?parentId=a1&start=0&count=25 

The server might return something like:

 { "items":[ {"name": "mcintosh", "color": "red-green", "size": "small", "uniqueId":"a2", "children": false} ], "identifier": "uniqueId", "numRows":1 } 

Then the grid will display one child on the apple row.

Answer 2

I think I have what you are looking for here. Some great sample code when using QueryReadStore with dojox.grid.LazyTreeGrid, and it is also fully explained step by step.

Please see here: http://livedocs.dojotoolkit.org/dojox/grid/LazyTreeGrid

I hope this speeds up your work and you can achieve your goals.

Hi

Franc.