Show the number of selected filters on each column

Tips submitted by ASP.NET Maker users
Post Reply
psjohnso
User
Posts: 4

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

psjohnso
User
Posts: 4

Post by psjohnso »

This feature has been added to ASP.NET Maker 2024


crash
User
Posts: 185

Post by crash »

Where is this feature in ASPNM 24 ?


MichaelG
User
Posts: 1185

Post by MichaelG »

The feature is built in. Once you enable a filter and make selection, the selected count will be displayed.


Post Reply