Show the number of selected filters on each column

Tips submitted by ASP.NET Maker users
Post Reply
Posts: 3

Show the number of selected filters on each column

Post by psjohnso »

This Jquery script dynamically adds a count badge in the table header next to each filter based on the number of selected options in that corresponding dropdown filter menu.
So now you will be able to see at a glance how many filters are selected!

I added the following script into "Client Scripts > Table-Specific > List Page > Startup Script" for my table.
I just needed this on one table, however if you wanted on all pages this would likely work in global code, but I have not tested.

		//Show filtered count
        $(".ew-filter-dropdown-btn").each(function() {
           var comboid = $(this).data("field")
           if ($("#"+comboid+" :selected").length >= 1) {
           $(this).find(".ew-table-header-filter").append("<span class='badge rounded-pill'>"+$("#"+comboid+" :selected").length+"</span>");

Add the following CSS to "styles > user"
You may have to adjust to work with your theme, but the idea was to give it a small count bubble in the top right corner of the column header next to the column name.

		div.ew-table-header-filter > span.badge {
			position: relative;
			right: 4px;
			top: -8px;
			padding: 0 0 0 5px;
			color: #f8f9fa;

Post Reply