CODEWITHSUNDEEP
datagridfilterdojo
Morgan Delvanna
Morgan Delvanna

Reputation: 23

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>

Upvotes: 0

Views: 2116

Answers (2)

srock
srock

Reputation: 543

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".

Upvotes: 1

labratmatt
labratmatt

Reputation: 1841

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);
            });

Upvotes: 0

Related Questions