I have a datagrid all set up, connected to an XMLStore. When the user selects a month from the dropdown list I want the grid to filter only that months data. Should be simple and according to every example it is. I can't figue out why it doesn't work, nor why IE tells me that none of the methods (filter, sort, setQuery) are supported by the dataGrid object.
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Untitled Page</title>
<style type="text/css">
@import "StyleSheet.css";
@import "js/dojotoolkit/dijit/themes/pfga/pfga.css";
@import "js/dojotoolkit/dojo/resources/dojo.css";
@import "js/dojotoolkit/dojox/grid/resources/pfgaGrid.css";
</style>
<script src="js/dojotoolkit/dojo/dojo.js" type="text/javascript" djConfig="parseOnLoad: true"></script>
<script type="text/javascript">
dojo.require("dojo.parser");
dojo.require("dojox.grid.DataGrid");
dojo.require("dojox.data.XmlStore");
dojo.require("dijit.layout.ContentPane");
dojo.require("dijit.form.FilteringSelect");
dojo.require("dojo.data.ItemFileReadStore");
theMonth = new Date();
var month_name=new Array(12);
month_name[0]="January"
month_name[1]="February"
month_name[2]="March"
month_name[3]="April"
month_name[4]="May"
month_name[5]="June"
month_name[6]="July"
month_name[7]="August"
month_name[8]="September"
month_name[9]="October"
month_name[10]="November"
month_name[11]="December"
dojo.addOnLoad(function(){dojo.byId('monthInput').value=month_name[theMonth.getMonth()]});
var eventStore = new dojox.data.XmlStore({url: "events.xml", rootItem: "event", keyAttribute: "dateSort"});
function monthClick() {
var ctr, test, rtrn, grid;
test = dojo.byId('monthInput').value;
for (ctr=0;ctr<=11;ctr++)
{
if (test==month_name[ctr])
{
rtrn = ctr +1;
}
}
eventGrid.filter({month:rtrn});
}
</script>
</head>
<body class="pfga">
<div id="content" style="width:800px; overflow:visible" dojoType="dijit.layout.ContentPane" region="center" class="pfga">
<div dojotype="dojo.data.ItemFileReadStore" url="months.json" jsID="monthStore"></div>
<div id="pagehead" class="Heading1" >Upcoming Range Events - PF&GA</div>
<p>
<input dojoType="dijit.form.FilteringSelect" store="monthStore" searchAttr="month" name="id" id="monthInput" class="pfga" onChange="monthClick()" />
</p>
<table dojoType="dojox.grid.DataGrid" store="eventStore" query="{month:'5'}" class="pfga" style="height:500px" clientSort="false" id="eventGrid" >
<thead>
<tr>
<th field="dateSort" hidden="true">DateSort</th>
<th field="date" width="80px">Date</th>
<th field="description" width="600">Description</th>
</tr>
<tr>
<th field="time" colspan="3">Details</th>
</tr>
</thead>
</table>
</div>
</body>
</html>