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>
As an addition to this, while the click event works perfectly, when I try to apply the filter on the loading of this page, when the grid is first loaded it does not filter the grid.
I've attempted to addOnLoad a filter, add it to the existing addOnLoad function I've created above and I've even tried to subsitute the value of my dropdown list at into the starting query of my grid at load time.
