Filter Datagrid onLoad
- by Morgan Delvanna
My data grid successfully filters when I select a month from a dropdown list, however when I try to filter it onLoad it just doesn't filter. The dropdown successfully displays the current month, and the grid should also show the current month data.
<script type="text/javascript">
dojo.require("dojox.grid.DataGrid");
dojo.require("dojox.data.XmlStore");
dojo.require("dijit.form.FilteringSelect");
dojo.require("dojo.data.ItemFileReadStore");
dojo.require("dojo.date");
theMonth = new Date();
dojo.addOnLoad(function()
{
dojo.byId('monthInput').value = month_name[(theMonth.getMonth()+1)];
var filterString='{month: "' + theMonth.getMonth() + '"}';
var filterObject=eval('('+filterString+')');
dijit.byId("eventGrid").filter(filterObject);
}
);
var eventStore = new dojox.data.XmlStore({url: "events.xml", rootItem: "event", keyAttribute: "dateSort"});
function monthClick() {
var ctr, test, rtrn;
test = dojo.byId('monthInput').value;
for (ctr=0;ctr<=11;ctr++)
{
if (test==month_name[ctr])
{
rtrn = ctr;
}
}
var filterString='{month: "' + rtrn + '"}';
var filterObject=eval('('+filterString+')');
eventGrid.setQuery(filterObject);
}
</script>
</head>
<body class="tundra">
<div id="header" dojoType="dijit.layout.ContentPane" region="top" class="pfga"></div>
<div id="menu" dojoType="dijit.layout.ContentPane" region="left" class="pfga"></div>
<div id="content" style="width:750px; 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 Events</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" class="pfga" style="height:500px; width:698px" clientSort="true" jsID="eventGrid">
<thead>
<tr>
<th field="date" width="80px">Date</th>
<th field="description" width="600px">Description</th>
</tr>
<tr>
<th field="time" colspan="2">Details</th>
</tr>
</thead>
</table>
</div>
<div id="footer"></div>
