Introducing FilteringList and FilteringGrid!

As you may or may not know, dgrid is a powerful tool for creating robust and optionally dojo/store-driven grids. If you haven"t been introduced to the dojo toolkit or dgrid, I advise you hop over to their sites and check them out. They may change your JavaScript programming life forever.

While dgrid does many things, as it is still young, it doesn"t have ever feature under the sun (and probably never will). The great thing about this is that it was written ontop of the very powerful dojo/declare functionality, making extending it a breeze. Since dgrid is compatible with stores, it is possible to filter the grid already by setting the store"s query, but I thought it would be useful to have this functionality packed together. Enter FilteringList and FilteringGrid.

FilteringList is an extension of OnDemandList. It takes any dojo store that implements a SimpleQueryEngine and spits out a list that is filterable. Let"s take a look at how we would implement this, and then we"ll go over the options you can use to change how it works.

Filter on fullName and company

Filter on fullName and company

As you can see, implementing a FilteringList is super easy. The list should automatically startup, but calling startup is never a bad idea. Let"s take a look at the options you can pass FilteringList and how they will affect the list.

• queryProperties - This is a list of the store properties that the filtering will iterate over. If there are no queryProperties provided, the list will default to searching over the idProperty of the store.
• store - This is the store that the list will render from.
• columns - This is a dgrid column structure.
• renderRow - Because this is a list and we"re using a store (not an array), we need to tell the list how to render from the store. If we were using just a plain array in a renderArray method, this would not be required.
• hasSearchBar - Set this to false if you don"t want the search bar to appear. If this is false, you will need to call the filter method manually. This defaults to true.
• minLength - The minimum length of the search criteria before the filtering kicks in. If the search value is less than this, the list will reset. This defaults to 2.
• filterTimeout - Timeout, in milliseconds, between search criteria changes before any filtering occurs. This defaults to 250.
• caseSensitive - Whether the search should be case sensitive.

The available methods on the list are listed below.

• toggleSearchBar - Toggles the presence of the search bar.
• filter - Filter the store of the list. Accepts a string. Does not have to be an exact match.
• set - Set various properties of the list. Accepts a property name and a value. Is used, for example, by toggleSearchBar in the form of this.set("hasSearchBar", !this.hasSearchBar)

Let"s take a look at various list implementations.

No Search Bar

No search bar

 

After manually filtering:

Case Sensitive

Case Sensitive Search

Failed Search:

Toggle Search Bar

Toggle Search Bar

Before toggle:

After toggle:

FilteringGrid

FilteringGrid is a subclass of FilteringList. It has the exact same properties and methods. The exception here is that it can display multiple columns of data, so it doesn't need a renderRow method and accepts a dgrid/Grid columns structure.

Let"s take a look at how the previous examples look in a FilteringGrid. Since the implementation is pretty much the exact same, I will not include any code examples, though they can be found in the tests included in the github repository.

Filter on fullName and company

No Search Bar

After manually filtering:

Case Sensitive

Failed Search:

Toggle Search Bar

Before toggle:

After toggle: