Give Visitors the Ability to Filter and Sort Grids
In this guide learn how to add filtering and sorting by specified criteria to your grids.
Table of Contents
- Filtering and Sorting
- Filter Group Options
- Configuring Filters
- Search Settings
- Next Up: Skins
Filtering and Sorting
In some cases it can be very useful to give visitors the option to filter the items in a given grid, for example showing only the items in a specific category:
By the same token, it can also be very helpful if a visitor can sort the items in a grid, for example showing the newest or lowest priced items first:
In this guide you will learn how to add both of these types of functionality to your grids.
Note: All options covered in this article can be found under the Nav-Filter-Sort tab.
Let’s start by looking at how to set up filtering. Everything you need to add filtering to a grid can be found in the Filter Groups panel:
Note: In order to provide users with buttons that enable them to filter a grid, a Filter navigation module we’ll need to have been added to one of the grid’s dropzones, as described on the previous page of this manual covering navigation:
Filter Group Options
We’ll begin by looking at each of the options found in the Filter Groups panel, before moving on to how to actually create and configure filters.
The Filter Type option allows you to choose between Single, where only one filter can be active at a time, and Multiple, where multiple filters can be active at once.
Add Filters by
The Add Filters by option only appears if Filter Type is set to Single.
This option allows you to determine if filters should be automatically created out of Categories, Tags, or the Default of both:
The Filter Logic option only appears if Filter Type is set to Multiple, and provides to you with the settings AND and OR:
If you choose the AND setting, items will only appear if they match all of the selected filters, e.g. “Filter one” and AND “Filter two”.
If you choose the OR setting, items will appear if they match any of the selected filters, e.g. “Filter one” and OR “Filter two”.
Start with Filter
The Start with Filter option allows you to load your grid with one or more filters already applied. For example, you might initially load only the items from a specific category such as “General News”:
To use this option, provide the “slug” of the filter you want to apply, or to apply multiple filters insert a comma separated list. A “slug” is basically a piece of text formatted with no special characters, spaces or capital letters.
If you are working with post content you’ll see the slug of each available filter displayed at the bottom of each filter box:
However if you are using custom categories the slugs won’t be displayed. In this case just use the filter’s name in lower case, and if the filter you want to use has more than one word, remove the spaces from between those words. For example “Custom Filter”:
If the Deep Linking option is set to On, you will be able to create a link to the grid’s page that automatically applies filter:
This can be done by appending a
# symbol and the slug of the filter to the end of the page’s URL, e.g.
Dropdown Elements on
If you are displaying your filters in a drop down list, you can set the Dropdown Elements on option to Hover or Click to require a user to hover or click respectively to reveal the available filters:
Mobile Filter Conversion
The Mobile Filter Conversion option only appears if Filter Type is set to Single, and when set to On it will collapse any inline display of filters into a dropdown list on small devices to save space:
Now that we know what each of the options in the Filter Groups panel does, let’s next look at how to actually add and configure filters.
Adding and Deleting Filters
At the bottom of the Filter Groups panel you’ll see a round, purple, plus button:
Click that button and a new filter box will be added at the bottom of the panel:
If you need to remove a filter box, click the small white cross at its top right corner:
Each filter box contains its own set of options. Let’s learn what each of those options does.
Show/Hide Filter “All” Button
Set the Show/Hide Filter “All” Button to show if you would like to display a Filter “All” button that will reset any filters that have previously been applied to the grid:
Filter “All” Text
Set the text that will appear on the Filter “All” button:
By default it will say “Filter – All”, but you can set it to display anything you want.
Layout Option lets you choose between two possible layout options for filter buttons:
Set the option to In Line to make all the available filters this appear side by side:
Alternatively set it to Dropdown in order to make all the available filters appear in a drop down list:
Dropdown Start Text
If Layout Option is set to Dropdown, use the Dropdown Start Text option to set the text that will appear at the top of the drop down list. For example, the following setting:
…would look like this:
Show Number of Elements
Set the Show Number of Elements option to On if you would like to add a small number to each filter button showing how many items match that filter:
Sort Filters Alphabetically
Set the Sort Filters Alphabetically option to On if you would like your filters to be sorted alphabetically:
If the above option is set to On, the Sort Order option will also appear, which can be set to either Ascending or Descending.
Available Filters in Group
The available filters in group area will show you the filters that can be applied to your grid:
If no filters are present click the purple plus button at the bottom of the area. If you’re working with post content, a box will appear in which you can select categories and/or tags to use as filters:
Or, if you are working with custom grid content, a box into which you can add a custom filter name will appear:
If you would like to show only a select number of the available filters you can check the box for each filter you would like to include:
You can also drag and drop filters the change their display order:
If you are using custom filters you can delete filters by clicking the trash can icon, or edit the custom filter name by clicking the pencil icon:
As well as giving users the ability to filter items in a grid you can also give them the ability to sort those items.
All the options available to configure sorting can be found in the Sorting panel:
Let’s see what each one of the options pictured above are used for.
Note: In order to provide users with buttons that enable them to sort a grid, a Sort navigation module we’ll need to have been added to one of the grid’s dropzones, as described on the previous page of this manual covering navigation:
Sort by Text
The Sort by Text option allows you to specify the text that should preface the sorting button:
The Available Sortings option shows you a list of all the criteria by which a grid’s items can be sorted. Hold CTRL/CMD and click each of the sorting criteria you would like to have included:
Start Sorting by
From the Start Sorting by dropdown list you can choose the criteria by which you would like your grid to initially be sorted:
In the Sorting Order option set whether you would like your grid items to be sorted in ascending or descending order:
An additional way of filtering a grid is through entering a search term:
Note: In order to provide users with inputs that enable them to search a grid, a Search navigation module we’ll need to have been added to one of the grid’s dropzones, as described on the previous page of this manual covering navigation:
There is only one option available for configuring grid search, and that is the Search Default Text option, into which you can enter a label for your grid’s search field:
Next Up: Skins
We’ve now covered everything to do with navigation, pagination, filtering and sorting and we are ready to move on to the next section.
Coming up, we’re going to look at skins and start learning about how you can control the appearance of your grids.