Angular ui-grid - Move filter section in column menu
I have started using ui-grid over the past few weeks. The column filter is really good, but I want to make it look and feel much better. Is there a way to move a filter parameter inside a column menu?
$scope.gridOptions = {
enableFiltering: true,
enableSorting: true,
columnDefs: [
{ field: 'name', enableColumnMenu: false,
filters: [
{
condition: uiGridConstants.filter.STARTS_WITH,
placeholder: 'Starts with'
},
{
condition: uiGridConstants.filter.CONTAINS,
placeholder: 'contains'
}
]
},
{ field: 'gender', enableHiding: false, suppressRemoveSort: true, sort: { direction: uiGridConstants.ASC } },
{
field: 'company',
menuItems: [
{
title: 'Outer Scope Alert',
icon: 'ui-grid-icon-info-circled',
action: function($event) {
this.context.blargh();
},
context: $scope
},
{
title: 'Grid ID',
action: function() {
alert('Grid ID: ' + this.grid.id);
}
},
{
title: 'Better to have filter options here!',
action: function() {
alert(this.context.col.displayName);
}
}
]
}
]
};
Also, I was trying to host the filter section so that I could make it available in the dropdown when requested by the user. But this breaks the header of the grid when we have a horizontal scrollbar.
.ui-grid-top-panel, .ui-grid-header-viewport{ overflow: visible;}
.listview-header.ui-grid-header-cell { overflow: visible; }
.listview-header.ui-grid-header-cell div[ui-grid-filter]{ position:absolute; right:0; width:125px; background-color:#eee; border:1px solid #ddd; z-index:1; }
Does anyone have a good idea to improve the look of the filter section?
+3
source to share
1 answer
I created a problem with the ui-grid team, they added this feature to their roadmap. We are looking forward to it!
Thanks to the team! GitHub Issue 3989
+1
source to share