Dojo dgrid Filter

dgrid and dstore, the Tom and Jerry of the Dojo world are wonderful for creating dynamic, data-driven tables. If you haven’t heard of them, check ’em out.

Creating a simple textbox that live-filters your dgrid is not super-obvious though. Here’s how.

First you must understand how dstore and dgrid work together. Here’s a summary:

dstore provides a common API for accessing and manipulating data. It is intended to replace dojo/store and the older dojo/data API. Starting with 0.4 dgrid interfaces directly with dstore stores. Previous releases of dgrid worked with dojo/store instances, and the older dojox/grid works with the older dojo/data API.

~ dgrid: Using Grids and Stores

In other words, to filter the dgrid, just filter the dstore that drives it.

First, create your dstore and dgrid. Then wire up your TextBox to call a function on every keypress:

Then write your function. Here you want to go through all the grid columns, creating a Filter on each one, and apply them to the dstore. Finally, set the dstore’s filter to the new Filter you created:

Here it is in action (code).

See Also

• Adding D3 to an ArcGIS Web AppBuilder Widget
• Dojo dstore with dgrid - Don't Forget Trackable
• ArcGIS JavaScript Draggable InfoWindow