Dojox tree grid in XPages

Question

Does anyone knows how to build a dojox Tree Grid in Xpages. I have tried to make a grid based on the information providet by http://xcellerant.net. I have created the xAgent that load the data from Database view but, when I load the test page I got an error.

Here is the code for xAgent that loads the data from view

<?xml version="1.0" encoding="UTF-8"?>
<xp:view xmlns:xp="http://www.ibm.com/xsp/core">

    <xp:this.afterRenderResponse><![CDATA[#{javascript:// Read view data and write out the JSON data for the categorized grid
// Each view entry is written out at the top level, but each category has a children property that is an array of IDs of child entries to indent.
// There can be any number of categorization levels -- just add 'children' properties to child entries.
// NOTE: It needs the newlines after each line between the write() statements or the browser doesn't see the output as JSON

var externalContext = facesContext.getExternalContext();
var writer = facesContext.getResponseWriter();
var response = externalContext.getResponse();

response.setContentType('application/json');
response.setHeader('Cache-Control', 'no-cache');

writer.write("{\n");
writer.write("identifier: 'id',\n");
writer.write("label: 'name', \n");
writer.write("items: [\n");

var categoryItem = "";
var childItems = "";

// Walk the view and build the JSON data
var vw:NotesView = database.getView('Vrakkoder');
var nav:NotesViewNavigator = vw.createViewNav();
var ve:NotesViewEntry = nav.getFirst();

while (ve != null) {
    var cv = ve.getColumnValues();

    // When a categorized entry is reached:
    // (a) write out the previous category and children
    // (b) set up the new category element  
    if (ve.isCategory()) {
        // Write out the previous category and child entries        
        if (categoryItem != "") {
            // Trim the trailing comma and space off the category item. 
            // (The child items still need to end with a comma before the next category item starts.)
            categoryItem = categoryItem.substring(0, categoryItem.length - 2);
            writer.write("\n" + categoryItem + "] }, \n" + childItems);
        }   

        // Start building the new category and child entries
        categoryItem = "  {id:'" + cv[0] + "', type: 'vrakgruppe', vrakgruppe:'" + cv[0] + "', children:[";
        childItems = "";

    } else {
        // This isn't a category, so simultaneously build the children property and the child entries, until the next category is reached.
        categoryItem += "{_reference:'" + ve.getUniversalID() + "'}, ";
        childItems += "{id:'" + ve.getUniversalID() + "', vrakode:'" + cv[1] + "', vrak_aarsak_kode:'" + cv[2] + "'}, "

    }   

    // Get the next entry and recycle the current one
    var tmpentry = nav.getNext();
    ve.recycle();
    ve = tmpentry;
}


// Write out the last category and children, without the trailing commas
categoryItem = categoryItem.substring(0, categoryItem.length - 2);
childItems = childItems.substring(0, childItems.length - 2);
writer.write("\n" + categoryItem + "] }, \n" + childItems);

// Close the JSON string
writer.write("]}");
writer.endDocument();}]]></xp:this.afterRenderResponse>
</xp:view>

Here is the code to produce the tree grid in xpage

<?xml version="1.0" encoding="UTF-8"?>
<xp:view xmlns:xp="http://www.ibm.com/xsp/core"
    xmlns:xe="http://www.ibm.com/xsp/coreex" dojoParseOnLoad="true"
    dojoTheme="true">

    <xp:this.resources>
        <xp:dojoModule name="dojox.grid.TreeGrid"></xp:dojoModule>
        <xp:dojoModule name="dijit.tree.ForestStoreModel"></xp:dojoModule>
        <xp:dojoModule name="dojo.data.ItemFileWriteStore"></xp:dojoModule>

        <xp:styleSheet
            href="/.ibmxspres/dojoroot/dojox/grid/resources/Grid.css">
        </xp:styleSheet>
        <xp:styleSheet
            href="/.ibmxspres/dojoroot/dijit/themes/tundra/tundra.css">
        </xp:styleSheet>
        <xp:styleSheet
            href="/.ibmxspres/dojoroot/dojox/grid/resources/tundraGrid.css">
        </xp:styleSheet>
    </xp:this.resources>


    <div id="treeGrid"></div>

    <xp:eventHandler event="onClientLoad" submit="false">
        <xp:this.script><![CDATA[var layout = [
  { name: "Vrakgruppe", field: "vrakgruppe"},
  { name: "Vrakkode", field: "vrakkode"},
  { name: "Vrak aarsak kode", field: "Vrak_aarsak_kode"}
];

var jsonStore = new dojo.data.ItemFileWriteStore({ url: "TreeGrid_DataStore.xsp"});

var treeModel = new dijit.tree.ForestStoreModel({
  store: jsonStore,
  query: {type: 'vrakgruppe'},
  rootId: 'groupRoot',
  rootLabel: 'Group',
  childrenAttrs: ['children']
});

var grid = new dojox.grid.TreeGrid({
  treeModel: treeModel,
  structure: layout
}, 'treeGrid');

grid.startup();

dojo.connect(window, "onresize", grid, "resize");]]></xp:this.script>
    </xp:eventHandler></xp:view>

Can Someone help me. I'm stuck.

Answer 1

You are very close to your solution. The only thing you have to add is rendered="false" to your XAgent "TreeGrid_DataStore.xsp"

Without this paramater your XAgent delivers not only the grid data but some additional header information too. You can see the difference when you open your XAgent in browser - with and without rendered="false"