Reorder Custom Grid Filters

This article will show you how to reorder filters for Custom Grids using Custom JavaScript Code.

Step 1:

Create a Custom Grid

Step 2:

Assign filters to your grid item following the instructions here

Step 3:

Insert the custom JS code below into the grid JS section and set up your preferred filter order by editing the “customOrder” part.

Important Note: Filter names should be entered all lowercase and without spaces.

(function() {
 
    /* ******************* */
    /* BEGIN USER SETTINGS */
    /* ******************* */
 
    // Filter names such as 'Hello There' needs to be written as "hellothere" in the customOrder Array below
    // Filter named "-1" is equivalent to "Filter - All"
    // Replace filter2, filter3 with filter data-fid "filter name"
    var customOrder = ['-1', 'filter2', 'filter3', 'filter1'];
 
    /* ******************* */
    /* END USER SETTINGS */
    /* ******************* */
 
    for(var i = 0; i < customOrder.length; i++) {
        var $this = jQuery('.esg-filterbutton[data-fid="' + customOrder[i] + '"]');
        $this.appendTo($this.parent());
    }
})();
Reorder Custom Grid Filters

The Author

KC

Strength does not come from winning. Your struggles develop your strengths. When you go through hardships and decide not to surrender, that is strength.

Liked this Post?
Please Share it!

[tp_popular title="Popular Grids" regex="(grids|template_library)" count=3]

Newsletter

Join over 25.000 others on the Essential Grid and Slider Revolution email list to get access to the latest news and exclusive content.