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

Question

I am relatively new to dojo and have seen how datagrid offers dynamic filtering, which reduces visible lines based on what you type in the text input of the filter. I have not found examples of how to do this with dgrid. If this can be done, provide an example or point me to the resource that the tutorial or example offers. Thanks!

Answer 1

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

I prepared an example for playing with in jsFiddle: http://jsfiddle.net/phusick/7gnFd/ , so I don't need to explain too much:

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

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 that this is not the answer to the question asked, and the answer provided is expert, and we use it very little.

However, this functionality does not work at all if you use TreeGrid (columns with the dgrid / tree plugin). I wrote code to simulate the same behavior as the accepted answer using a grid of trees. This basically just iterates over the items in the repository and hides any line items that don't match any condition that you specified. Thought I'd share it if he would help anyone. This is pretty ugly, and I'm sure it can be improved, but it works.

It basically uses the same concept as phusick. You need to look at the value in the TextBox, but instead of updating the grid, you call the 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 is 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); } }