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
Use dojo.data
as it’s no longer part of the experimental Dojo package dojox.