feat(filter): add filterContainer option to allow a column filter to be placed in column menu #6901
Conversation
…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.
caseyjhol
force-pushed
the
filter-in-menu
branch
from
57af114 to
eb0f3d2
Compare
|
@mportuga Any thoughts on this? Not sure why the commit lint is taking over a week. |
| @@ -328,6 +333,14 @@ | |||
|
|
|||
| updateHeaderOptions(); | |||
|
|
|||
| if ($scope.col.filterContainer === 'columnMenu' && $scope.col.filterable) { | |||
| $rootScope.$on('menu-shown', function() { | |||
There was a problem hiding this comment.
Why is $rootScope needed here?
There was a problem hiding this comment.
Also, it might make sense to have tests that specifically change that setFilter works as expected when menu-shown event is triggered,
There was a problem hiding this comment.
The 'menu-shown' event is emitted from the uiGridMenu directive, which is outside the uiGridHeaderCell directive, so $rootScope is needed to listen for the event from within uiGridHeaderCell. I'm open to suggestions if you think there might be a better way. We could perhaps move the filter stuff to another directive ('uiGrid'?).
|
@caseyjhol Overall it looks good. Just one question. And I am not sure why commit lint is being slow. |
| angular.module('ui.grid').directive('uiGridHeaderCell', ['$compile', '$timeout', '$window', '$document', 'gridUtil', 'uiGridConstants', 'ScrollEvent', 'i18nService', | ||
| function ($compile, $timeout, $window, $document, gridUtil, uiGridConstants, ScrollEvent, i18nService) { | ||
| angular.module('ui.grid').directive('uiGridHeaderCell', ['$compile', '$timeout', '$window', '$document', 'gridUtil', 'uiGridConstants', 'ScrollEvent', 'i18nService', '$rootScope', | ||
| function ($compile, $timeout, $window, $document, gridUtil, uiGridConstants, ScrollEvent, i18nService, $rootScope) { |
There was a problem hiding this comment.
Could you move rootScope to the start? It is more of a personal preference, but I like having all of the $ variables grouped together.
| function ($compile, $timeout, $window, $document, gridUtil, uiGridConstants, ScrollEvent, i18nService, $rootScope) { | |
| function ($compile, $timeout, $window, $document, $rootScope, gridUtil, uiGridConstants, ScrollEvent, i18nService) { |
| @@ -1,8 +1,8 @@ | |||
| (function() { | |||
| 'use strict'; | |||
|
|
|||
| angular.module('ui.grid').directive('uiGridHeaderCell', ['$compile', '$timeout', '$window', '$document', 'gridUtil', 'uiGridConstants', 'ScrollEvent', 'i18nService', | |||
| function ($compile, $timeout, $window, $document, gridUtil, uiGridConstants, ScrollEvent, i18nService) { | |||
| angular.module('ui.grid').directive('uiGridHeaderCell', ['$compile', '$timeout', '$window', '$document', 'gridUtil', 'uiGridConstants', 'ScrollEvent', 'i18nService', '$rootScope', | |||
There was a problem hiding this comment.
| angular.module('ui.grid').directive('uiGridHeaderCell', ['$compile', '$timeout', '$window', '$document', 'gridUtil', 'uiGridConstants', 'ScrollEvent', 'i18nService', '$rootScope', | |
| angular.module('ui.grid').directive('uiGridHeaderCell', ['$compile', '$timeout', '$window', '$document', '$rootScope', 'gridUtil', 'uiGridConstants', 'ScrollEvent', 'i18nService', |
|
@mportuga You want me to submit another PR to move $rootScope? I can work on some more advanced tests, too. |
New behavior: http://next.plnkr.co/edit/nJbWFbLy7qutQslTQovF?preview
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.