Is it possible to filter data in a dgrid like you can in a datagrid? If so, how?

dgrid, dojo

Solution

Yes, it is possible. Use `dgrid/OnDemandGrid` and define `query` function that will return `true` or `false` based on your logic for each row in `dojo/store` powering the grid.

I prepared an example to play with at jsFiddle: http://jsfiddle.net/phusick/7gnFd/, so I do not have to explain too much:

The Query Function:

var filterQuery = function(item, index, items) {
    var filterString = filter ? filter.get("value") + "" : "";

    // early exists
    if (filterString.length < 2) return true;
    if (!item.Name) return false;

    // compare
    var name = (item.Name + "").toLowerCase();
    if (~name.indexOf(filterString.toLowerCase())) { return true;}

    return false;
};

The Grid:

var grid = new Grid({
    store: store,
    query: filterQuery, // <== the query function for filtering
    columns: {
        Name: "Name",
        Year: "Year",
        Artist: "Artist",
        Album: "Album",
        Genre: "Genre"
    }
}, "grid");

Problem

I'm relatively new to dojo and have seen how datagrid offers a dynamic filtering capability that reduces the visible rows based on what you type into a filter text input. I have not found any examples of how to do it with the dgrid. If it can be done, please provide an example or point me to a resource that offers a tutorial or example. Thanks!

Original source