Skip to Content | Skip to Navigation


Filtering data

The Grid offers a filter() method, to filter data from the current query (client-side filtering).

<script type="text/javascript">
    dojo.require("dojox.grid.DataGrid");
    dojo.require("dojox.data.CsvStore");
    dojo.require("dijit.form.Button");
</script>
<span dojoType="dojox.data.CsvStore"
    // We use the store from the examples above.
    // Please uncomment this line, if you need your own store:
    // jsId="store2" url="/_static/dojo/dojox/grid/tests/support/movies.csv">
</span>
<div>
    Click on the button "filter movies" to filter the current data (only movies with title "T*" will be visible).
    Click on the button "show all movies" to remove the filter.
</div>
<table dojoType="dojox.grid.DataGrid"
    jsId="grid3"
    store="store2"
    query="{ Title: '*' }"
    clientSort="true"
    style="width: 400px; height: 200px;"
    rowSelector="20px">
    <thead>
        <tr>
            <th width="300px" field="Title">Title of Movie</th>
            <th width="50px">Year</th>
        </tr>
        <tr>
            <th colspan="2">Producer</th>
        </tr>
    </thead>
</table>
<div dojoType="dijit.form.Button">
    filter movies
    <script type="dojo/method" event="onClick" args="evt">
        // Filter the movies from the data store:
        grid3.filter({Title: "T*"});
    </script>
</div>
<div dojoType="dijit.form.Button">
    show all movies
    <script type="dojo/method" event="onClick" args="evt">
        // reset the filter:
        grid3.filter({Title: "*"});
    </script>
</div>
<style type="text/css">
    @import "/_static/dojo/dijit/themes/nihilo/nihilo.css";
    @import "/_static/dojo/dojox/grid/resources/nihiloGrid.css";
</style>