Linked FILTER MENUS

API & Custom Code
1

APPLIES TO CLASSIC ONLY

KTL has a great _lf Linked Filter keyword, but that doesn’t work with Filter Menus. To achieve the same thing, you can use this small Javascript & CSS pair. Set up all the views with the identical filter menus, then decide which one will drive the others - below i call it the master -and its probably the top one to keep the menu at the top!

Apply the code below, and then any click on that master menu will propagate to all the others as well, even though they are hidden from sight and mouse clicks.

Insert this javascript, with the view number for the master replacing the MMM and the view numbers for the children replacing the XXX, YYY, ZZZ etc).

// JS pane — forward clicks from the master menu (view_MMM) to all child menus
const CHILD_VIEWS = ['view_ZZZ', 'view_XXX', 'view_YYY'];

$(document).on('click', '#view_MMM .js-filter-menu a', function() {
    const label = $(this).find('span').text().trim();

    CHILD_VIEWS.forEach(viewId => {
        $(`#${viewId} .js-filter-menu a`).filter(function() {
            return $(this).find('span').text().trim() === label;
        }).trigger('click');
    });
});

Insert this CSS which will hide the filter menus on the children for a cleaner look.

/* CSS pane — hide all child menus */
#view_433 .js-filter-menu,
#view_XXX .js-filter-menu,
#view_YYY .js-filter-menu {
    display: none !important;
}

Job done. One filter manu drives a page full of graphs, reports, grids, whatever…