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

      

Fiddle 1

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

      

Fiddle 2

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







All Articles