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

Question

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!

Answer 1

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

Answer 2

I know this isn't the answer to the question asked, and the answer provided is masterful and we use it quite a bit.

However, this functionality doesn't seem to work well at all if you're using a TreeGrid (columns with the "dgrid/tree" plugin). I've written some code to simulate the same behavior as the accepted answer with a tree grid. It's basically just looping through the items in the store and hiding any row elements that don't match whatever condition you set forth. Thought I would share it in case it helps anybody. It's rather ugly and I'm sure it can be improved upon, but it works.

It basically uses the same concept as phusick's answer. You need to watch a value on a TextBox, but instead of refreshing the grid you have it call a function:

textBox.watch("value", lang.hitch(this, function() {
                        if (timeoutId) {
                            clearTimeout(timeoutId);
                            timeoutId = null;
                        };

                        timeoutId = setTimeout(lang.hitch(this, function() {
                            this.filterGridByName(textBox.get('value'), myGrid);
                        }, 300));
                    }));

And here's the function:

filterGridByName: function(name, grid){
                try {
                        for (var j in grid.store.data){
                            var dataItem = grid.store.data[j];
                            var childrenLength = dataItem.children.length;
                            var childrenHiddenCount = 0;
                            var parentRow = grid.row(dataItem.id); 
                            for (var k in dataItem.children){

                                var row = grid.row(dataItem.children[k].id);
                                var found = false;
                                if (dataItem.children[k].name.toLowerCase().indexOf(name.toLowerCase()) != -1){
                                    found = true;
                                }
                                if (found){
                                    if (row.element){
                                        domStyle.set(row.element, "display", "block");
                                    }
                                    if (parentRow.element){
                                        domStyle.set(parentRow.element, "display", "block");
                                    }
                                } else {
                                    childrenHiddenCount++;
                                    // programmatically uncheck any hidden item so hidden items
                                    for (var m in grid.dirty){
                                        if (m === dataItem.children[k].id && grid.dirty[m].selected){
                                            grid.dirty[m].selected = false;
                                        }
                                    }
                                    if (row.element){
                                        domStyle.set(row.element, "display", "none");
                                    }
                                }
                            }
                            // if all of the children were hidden, hide the parent too

                            if (childrenLength === childrenHiddenCount){
                                domStyle.set(parentRow.element, "display", "none");
                            }
                        }
                } catch (err){
                    console.info("error: ", err);
                }
            }