Recently came across a requirement to automatically filter an Entity List when a filter is selected.

This was a List where all the filters are drop down boxes so it didn’t feel intuitive to choose an option and then have to click “Apply” for the Entity List to display the filtered results.

This is relatively straightforward and you just need to find the elements within the page and add an event to the on change of the dropdowns.

If you have a look at the source for the filters you’ll notice they’re numbered in a structured way with “dropdown_X” where X is the filter position:

So that’s easy enough, next we need to find a way to identify the button so we can trigger the click event. Again, just have a look at the source code:

No id but it does use a very identifiable class, “btn-entitylist-filter-submit”, so we can use that.

All that’s left is to create the code that iterates through all the filters and adds an event whenever an option is selected:

$(document).ready(function() {
  if($("div button.btn.btn-default.btn-entitylist-filter-submit").length > 0)
  {
    $("div button.btn.btn-default.btn-entitylist-filter-submit").hide();
    for(var i = 0; i < 10; i++)
    {
      if($("#dropdown_" + i).length > 0)
          $("#dropdown_" + i).on('change', function() {$("button.btn-entitylist-filter-submit").click() });
    }
  }
});

The above code first confirms that it can find a button with the same classes we identified before, if it does it loops a maximum of 10 times and sets a change event on the dropdown to trigger the click event of the button.

At the same time it also hides the button since we won’t be needing it anymore.

I’m limiting the amount of dropdowns to 10 but if for some reason you have more than 10 just change the for max loops from 10 to a higher number.

That’s it!