4.0Essential Grid 4.0 is here — see what’s new

FAQ

Reorder Custom Grid Filters

Essential Grid 3 · The 4.0 FAQ

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());
    }
})();