dojox.data is undefined while trying to create a dojo data grid

Question

I'm using XPages and attempting to create a dojo enhanced data grid for the first time. I'm following examples I found online, but am getting the error: "dojox.data is undefined". I hardly found anything about this error, so apparently it must be something simple to everyone else. I'm a little lost here, can someone point me in the right direction to get this resolved?

My goal is to query data from an ERP System and then display it in the grid. However, I need to get it working with hard coded data first.

Here is my xpage source:

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

    <xp:this.resources>
        <xp:dojoModule name="dojox.grid.EnhancedGrid"></xp:dojoModule>
        <xp:dojoModule name="dojox.grid.enhanced.plugins.DnD"></xp:dojoModule>
        <xp:dojoModule
            name="dojox.grid.enhanced.plugins.NestedSorting">
        </xp:dojoModule>
        <xp:dojoModule
            name="dojox.grid.enhanced.plugins.IndirectSelection">
        </xp:dojoModule>
        <xp:dojoModule name="dojox.grid.enhanced.plugins.Filter"></xp:dojoModule>
        <xp:dojoModule name="dojox.data.ItemFileWriteStore"></xp:dojoModule>

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

    <xp:br></xp:br>


    <xp:div id="gridDiv"></xp:div>

<xp:eventHandler event="onClientLoad" submit="false">
    <xp:this.script>
        <xp:executeClientScript>
            <xp:this.script><![CDATA[dojo.addOnLoad(function(){

   //setup the grid layout, format = {'name': 'columntitle', 'field': 'fieldname'}
    var layout = [{
    defaultCell: {editable: false, type: dojox.grid.cells._Widget},
    rows:[
       {'field': "qtno", 'name': "Quote No.", 'width': '20px'},
       {'field': "cusno", 'name': "Cust #", 'width': '20px'},
       {'field': "cusnm", 'name': "Customer", 'width': '30px'},
       {'field': "qtamt", 'name': "Quote Amt", 'width': '20px'},  
       ]    
    }]

    //setup data store
    var data = {
      identifier: 'id',
      items: []
    };

    //setup data array of strings, format = {fieldname: "strvalue", fieldname: numvalue} 
    var data_list = [
      { qtno: "Q01234", cusno: "4419", cusnm: "ABC Corporation", qtamt: 29.91},
      { qtno: "Q42198", cusno: "3308", cusnm: "Acme Company", qtamt: 9.33},
      { qtno: "Q11095", cusno: "7041", cusnm: "XYZ Industries", qtamt: 19.34}
    ];

    //default the rows
    var rows = 100;

    //populate the store with the data array of strings
    for(var i=0, l=data_list.length; i<rows; i++){
      data.items.push(dojo.mixin({ id: i+1 }, data_list[i%l]));
    }
    var store = new dojox.data.ItemFileWriteStore({data: data});

    //define the grid
    var grid = new dojox.grid.EnhancedGrid({
        id: 'grid',
        query: {}, 
        store: store,
        structure: layout,
        rowSelector: '20px',
        autoHeight: 25
    }, '#{id:gridDiv}');

    //create it
    grid.startup();

})


]]></xp:this.script>
        </xp:executeClientScript>
    </xp:this.script></xp:eventHandler></xp:view>

and, here is the error:

TypeError: dojox.data is undefined
Stack trace:
view__id1__id3_clientSide_onClientLoad/<@http://domsvr3.mphassoc.com/dev/MiscDev.nsf/DataGrid.xsp:87:9

Answer 1

Use dojo.data as it’s no longer part of the experimental Dojo package dojox.