Filter instead of sort for bool column header

[Victor]

Hi!

We have a few very narrow bool columns (representing for example "Is favorite"). We have been discussing how to do sorting/filtering in a good way here and would like to get some input as to what is possible.

For us the funnel icon (to filter) takes too much space, and is also the popup is too verbose. Rather we would like to click to filter, similair to how sorting works. Would this be possible? Or is there another preferred way?

What we think we would like is:

1. Sorting turned off for the bool column, filtering turned on, but without the funnel icon (or exchange it for a custom icon?) - all items shown
2. User clicks header - only favorite items are shown
3. User clicks header again - only non-favorite items are shown
4. User clicks header once more - all items are shown
5. During step 1-4 the selected grid sort order is maintained.

We got a demo working by doing something like (after setting .Filterable(false).Sortable(true) on the column):

public ActionResult _Items([DataSourceRequest]DataSourceRequest request)

{

    var favSort = request.Sorts.FirstOrDefault(s => s.Member == "IsFavorite");

    if (favSort != null)

    {

        request.Sorts.RemoveAt(request.Sorts.IndexOf(favSort));

        request.Filters.Add(new FilterDescriptor("IsFavorite", FilterOperator.IsEqualTo, favSort.SortDirection == ListSortDirection.Ascending));

    }

    //...

}

It works quite well but has two drawbacks:

1. The previously selected sort order is lost
2. The visual clue that only favorites / non-favorites are shown is the "up/down" arrow normally showing sort order, which is a little bit confusing. For specifically the favorite column something like "All results => dimmed star", "Only favorites => filled star", Only non-favorites => hollow star" would probably be best, but we dont know how to achieve this.

Any thoughts on how to implement any of this?


Thanks!
/Victor

[Rosen]

Hello Victor,

In order to achieve similar to the described behavior, you may consider using a column header template to place the required HTML elements and then use the DataSource filter method to applied the appropriate filter.

Greetings,
Rosen
the Telerik team

[Victor]

Very good idea, works well!

One more question though - I just wrote a function to preserve the current filtering when applying a new one, but just realized that this probably already exists... Does it and if so how to use it? I suppose you already use this functionality... The expected behaviour is this:

1. User filters "Name" column, "contains 'a'"
2. I call dataSource.mergeFilter({ field: "IsFavorite", operator: "eq", value: true })
3. Filter gets set "name contains 'a' and IsFavorite == true"
4. I call dataSource mergeFilter({field: IsFavorite"})
5. Filter gets set "name contains 'a'"

Is this possible?

Thanks again!
/Victor

[Rosen]

Hello Victor,

I'm afraid that there is no such built-in method. Therefore, you will need to use the method you have implemented.

Greetings,
Rosen
the Telerik team

[Victor]

Ok, thanks for that. Just out of curiosity, how do you handle aggregation of user filtering (funnel => Name contains 'a', funnel => Clear)? And could those functions maybe be exposed publicly later on?

/Victor

[Rosen]

Hi Victor,

Currently the merge of filter expressions set through the filter menu is handled by the menu itself. We may consider implementing similar functionality within the DataSource component  for a future release of the library.

Regards,
Rosen
the Telerik team