Improving user experience - Moving filter section in column menu or make it available in other dropdown #3989

aravindtrue · 2015-07-16T05:55:19Z

I've started using it for past few weeks, it has really improved a lot with such a great performance. I would like to share few thoughts on filter section, which works great but need few improvements on look and feel. Right now, all filter options are displayed right below the column header and it will be visible all the time. As a user, I want to see it whenever I want to filter, is there any way to move the complete filter section in column menu i.e., after sort options?

Also, I was trying to position the filter section so that I can make it available in a dropdown on user demand. But this breaks the grid header when we have horizontal scroll bar.

http://stackoverflow.com/questions/31422422/angular-ui-grid-moving-filter-section-in-column-menu

Do you have any improvement plans for filter section? Can you please help to improve the look and feel?

shivarajskit · 2015-07-16T06:09:12Z

I am also looking for the same. It will be nice to have this feature on top of awesome existing features of UI Grid.

techiemanas · 2015-07-16T06:41:48Z

This is a nice to have feature , i was also wondering for this sometime around.

Dinesh-Talreja · 2015-07-16T11:55:15Z

+1

rameshpadithurai · 2015-07-16T11:57:20Z

Even i have such requirement for one of my project, Can any one help us out on this.

Thanks in advance

Sweta-Agnihotri · 2015-07-16T11:58:59Z

+1

dipabhatt · 2015-07-16T11:59:47Z

+1

nbdesai · 2015-07-16T12:06:12Z

+1

PaulL1 · 2015-07-19T07:33:03Z

The filter section is switchable, so you can easily add your own UI extras (perhaps in the grid menu) to show and hide the filter boxes. I think one of the tutorials even demonstrates this. Would this be sufficient for your needs? If not, you can use custom menu items on the columns to provide custom filter boxes. I have done this in one of my applications because I wanted to use modal windows to set the filters, and it works just fine.

aravindtrue · 2015-07-19T15:26:23Z

@PaulL1 Can you please provide me a Plnkr or any demonstration link? It'll be very helpful for me to analyze.

KulPrashant · 2015-07-21T21:41:51Z

This will be really very useful, I can see that it is added as milestone, could you (@swalters) please let us know if you have approximate time frame to release this feature...Thanks..

vipsingh1 · 2015-07-21T21:48:50Z

It would be great if we get this feature available in next release.

biksteam · 2015-07-29T14:09:43Z

I've got a prototype working. Is there anyone working on this one? Or can I send a PR for this?
I just need to turn this into a feature.

swalters · 2015-07-29T14:16:35Z

@Webiks can you post some screenshots here of what you've done? thanks.

biksteam · 2015-07-29T14:25:02Z

It might take a while. It's in the office. In the meantime, I'm having problems running the dev environment. #4071.

biksteam · 2015-07-31T09:38:51Z

There you go:
http://plnkr.co/edit/HVohvjElaMoJU3kFKMjx?p=preview
I started with inserting the core filter template into the popup, but then decided to do something more kendo-ui like (they are not so good when it comes to performance, but they are very good with UI - u gotta give them that).
EDIT:
Now you can also filter with selection in the popup
I'll finish date and number and then it's ngDocing... such a downer after so much fun-coding
(test selection by filtering the "gender" col)

aravindtrue · 2015-07-31T10:37:44Z

@Webiks - The look and feel is really great! I'll try it out in my application and scale the performance.

biksteam · 2015-07-31T10:38:30Z

It's hardly finished, but would be great to get feedback on the go., Thanks

biksteam · 2015-07-31T10:40:44Z

You can now choose between multiple selection and singular selection (plnkr updated to show how).

orlandumike · 2016-02-03T09:28:32Z

I think that it would provide a better UX and that's what we are looking for.

Our UX team was proposing to have some kind of filter icon beside the column name that would expand a hidden section contailing the filter. Having the normal auto complete text or a dropdown or a customer filter like this would be nice.

The filter icon could have 2 versions: (ex: one empty and another filled)

Not applied (so that we can make it pop and add a filter)
Currently applied (indicator that a filter is appled and also provide the way to change it.

Clearing the filter should probably be part of the expanded section.

Good work with the grid guys by the way!

swalters · 2016-02-03T13:40:43Z

@yccteam has a branch that provides a similar ui. It will be implemented outside the core repository. #4108

orlandumike · 2016-02-04T12:34:59Z

Ok, but will it ever make it into the core?

At the moment, I'm adding a filter button as a custom filter that open a dialog and afterward update the term of the column.

sryzycki · 2017-01-09T11:12:05Z

Hi and thank you for this amazing Angular module. I understand that you guys are extremely busy but I would like to still ask this question:
What's the latest on having column filters inside of a dropdown?

Happy New Year!

AnushaputtaUI · 2017-11-30T21:45:08Z

Any Ideas on how to achieve the above design using UI-grid,I saw the other options in the comments here and they are not working

betsydupuis · 2017-12-01T14:42:12Z

@AnushaputtaUI

I think that it could be accomplished with a filtered search field like the example below.

Selections could then be displayed as a list of tags like Appliances : Toaster, Appliances : Refrigerator, Appliances: Stand Mixer

AnushaputtaUI · 2017-12-01T16:52:20Z

I guess my question is I need some filter icon for each column and when I click on the icon it should toggle the filter widget on each column.

…be placed in column menu filterContainer has a default value of "headerCell" which is the same as existing behavior. A filterContainer value of "columnMenu" moves the filter into the column menu. This improves the appearance of the filter in situations where there are multiple filters for a single column (preventing the header from simply getting taller and taller) and offers a streamlined alternative to placing the filter directly in the header cell. Fixes angular-ui#3989.

…be placed in column menu filterContainer has a default value of "headerCell" which is the same as existing behavior. A filterContainer value of "columnMenu" moves the filter into the column menu. This improves the appearance of the filter in situations where there are multiple filters for a single column (preventing the header from simply getting taller and taller) and offers a streamlined alternative to placing the filter directly in the header cell. Fixes #3989.

aravindtrue changed the title ~~Improving user experience - Moving filter section in column menu or make it available in a other dropdown~~ Improving user experience - Moving filter section in column menu or make it available in other dropdown Jul 16, 2015

swalters added this to the 3.1 milestone Jul 16, 2015

swalters added the type: enhancement label Jul 16, 2015

JLLeitschuh added the PRs plz! label Jul 23, 2015

swalters closed this as completed Jul 29, 2015

swalters reopened this Jul 29, 2015

mportuga added help wanted and removed PRs plz! labels Mar 20, 2018

caseyjhol mentioned this issue Dec 3, 2018

feat(filter): add filterContainer option to allow a column filter to be placed in column menu #6901

Merged

mportuga closed this as completed in #6901 Dec 19, 2018

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Improving user experience - Moving filter section in column menu or make it available in other dropdown #3989

Improving user experience - Moving filter section in column menu or make it available in other dropdown #3989

aravindtrue commented Jul 16, 2015

shivarajskit commented Jul 16, 2015

techiemanas commented Jul 16, 2015

Dinesh-Talreja commented Jul 16, 2015

rameshpadithurai commented Jul 16, 2015

Sweta-Agnihotri commented Jul 16, 2015

dipabhatt commented Jul 16, 2015

nbdesai commented Jul 16, 2015

PaulL1 commented Jul 19, 2015

aravindtrue commented Jul 19, 2015

KulPrashant commented Jul 21, 2015

vipsingh1 commented Jul 21, 2015

biksteam commented Jul 29, 2015

swalters commented Jul 29, 2015

biksteam commented Jul 29, 2015

biksteam commented Jul 31, 2015

aravindtrue commented Jul 31, 2015

biksteam commented Jul 31, 2015

biksteam commented Jul 31, 2015

orlandumike commented Feb 3, 2016

swalters commented Feb 3, 2016

orlandumike commented Feb 4, 2016

sryzycki commented Jan 9, 2017

AnushaputtaUI commented Nov 30, 2017 •

edited

Loading

betsydupuis commented Dec 1, 2017

AnushaputtaUI commented Dec 1, 2017

Improving user experience - Moving filter section in column menu or make it available in other dropdown #3989

Improving user experience - Moving filter section in column menu or make it available in other dropdown #3989

Comments

aravindtrue commented Jul 16, 2015

shivarajskit commented Jul 16, 2015

techiemanas commented Jul 16, 2015

Dinesh-Talreja commented Jul 16, 2015

rameshpadithurai commented Jul 16, 2015

Sweta-Agnihotri commented Jul 16, 2015

dipabhatt commented Jul 16, 2015

nbdesai commented Jul 16, 2015

PaulL1 commented Jul 19, 2015

aravindtrue commented Jul 19, 2015

KulPrashant commented Jul 21, 2015

vipsingh1 commented Jul 21, 2015

biksteam commented Jul 29, 2015

swalters commented Jul 29, 2015

biksteam commented Jul 29, 2015

biksteam commented Jul 31, 2015

aravindtrue commented Jul 31, 2015

biksteam commented Jul 31, 2015

biksteam commented Jul 31, 2015

orlandumike commented Feb 3, 2016

swalters commented Feb 3, 2016

orlandumike commented Feb 4, 2016

sryzycki commented Jan 9, 2017

AnushaputtaUI commented Nov 30, 2017 • edited Loading

betsydupuis commented Dec 1, 2017

AnushaputtaUI commented Dec 1, 2017

AnushaputtaUI commented Nov 30, 2017 •

edited

Loading