Filter Datagrid onLoad
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>
filter() is client side filtering. It should be called after the grid is built and data loaded.
You want to set the query parameter of the grid. This determines what records from the store get to the grid. Its similar to "select * from table".
Filter is used to filter these results, so call filter when the user makes a selection from your client side filtering. Filter is similar to adding a where clause to "select * from table".
This could be an asynchronous issue. That is, your addOnLoad executes because the DOM is loaded, but your data hasn't finished loading. Can you try connecting your month filtering logic to the following instead of to addOnLoad? Maybe it could look something like this:
dojo.connect(eventGrid, "_onFetchComplete", function(){
dojo.byId('monthInput').value = month_name[(theMonth.getMonth()+1)];
var filterString='{month: "' + theMonth.getMonth() + '"}';
var filterObject=eval('('+filterString+')');
dijit.byId("eventGrid").filter(filterObject);
});
加载中,请稍侯......
精彩评论