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

Further Resources for Web Design and Development Enthusiasts

Alright! We've embarked on quite an adventure exploring the realms of this topic. But why stop there? The world of web design and development is vast, and there's always more to learn and discover. Let's dive into some resources that'll keep your knowledge fresh, your skills sharp, and your passion ignited:

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!