admin管理员组

文章数量:1312816

I have a multi-select filter option on top of my ag-grid table. If I select 3 options out of them, the filter set to the model is given below. But ag-grid is not applying all the 3 options. It applies only 2. Is this a limitation of agNumberColumnFilter in ag-grid-angular ?

{
  "filterType": "number",
  "type": "number",
  "operator": "OR",
  "conditions": [
    {
      "type": "lessThan",
      "filter": 2
    },
    {
      "type": "inRange",
      "filter": 2,
      "filterTo": 5
    },
    {
      "type": "inRange",
      "filter": 6,
      "filterTo": 15
    }
  ]
}

Below is my ag-grid-angular and the definition for the column I am applying this filter for.

<ag-grid-angular #inboxGrid id="viewDetailsGrid"
                                class="ag-theme-balham view-details-grid mailbox-grid-unique-class mailbox-grid-tyle context-menu-style-override"
                                [columnDefs]="columnDefs" [masterDetail]="true"
                                [detailCellRenderer]="detailCellRenderer" [frameworkComponents]="frameworkComponents"
                                [rowData]="rowData" (gridReady)="onGridReady($event)" [rowClassRules]="rowClassRules"
                                [rowSelection]="rowSelection" (selectionChanged)="onSelectionChanged($event)"
                                [allowContextMenuWithControlKey]="true" [getContextMenuItems]="getContextMenuItems"
                                [headerHeight]="32" (rowGroupOpened)="onRowGroupOpened($event)" [enableColResize]="true"
                                (componentStateChanged)="inboxStateChanged($event)" [suppressMenuHide]="true"
                                [groupUseEntireRow]="true" [suppressPaginationPanel]="true"
                                [rowGroupPanelShow]="rowGroupPanelShow" [suppressDragLeaveHidesColumns]="true"
                                [suppressMakeColumnVisibleAfterUnGroup]="false"
                                (rowDoubleClicked)="rowDoubleClicked($event)"
                                [groupRowInnerRenderer]="groupRowInnerRenderer"
                                [groupRowRendererParams]="groupRowRendererParams" [popupParent]="popupParent"
                                (filterChanged)="filterChanged($event)" (firstDataRendered)="firstDataRendered($event)"
                                [getRowHeight]="getRowHeight" (rowDataChanged)="rowDataChanged($event)"
                                [enableCellChangeFlash]="false" [gridOptions]="gridOptions"
                                (columnResized)="onColumnResized($event)" (columnMoved)="ColumnMovedEvent($event)"
                                [suppressPropertyNamesCheck]=false (rowSelected)="onRowSelected($event)"
                                [suppressColumnVirtualisation]="true" (rowClicked)="onRowClicked($event)"
                                [modules]="modules" [embedFullWidthRows]="true" (bodyScroll)="onBodyScroll($event)"
                                [rememberGroupStateWhenNewData]="true" [getRowId]="getRowId"
                                [defaultColDef]="defaultColDef" [autoGroupColumnDef]="autoGroupColumnDef"
                                [groupMaintainOrder]="true" [groupDisplayType]="groupDisplayType"
                                (columnRowGroupChanged)="onColumnRowGroupChanged($event)"
                                ></ag-grid-angular>
                            
</div>

Definition:

      {
        "headerName": "View Count",
        "field": "viewCount",
        sortingOrder: ["asc", "desc"],
        hide: false,
        suppressMenu: false,
        resizable: true,
        suppressMovable: true,
        showInSecondary: false,
        suppressSizeToFit: true, 
        suppressColumnVirtualisation: true,
        width: 100%,
        minWidth: 330px,
        maxWidth: 700px,
        flex: 1,
        filter: "agNumberColumnFilter",
        menuTabs: ["filterMenuTab"],
        filterParams: {
          suppressMiniFilter: false,
          cellRenderer: (params: any) => {
            return params.value === null ? null : Number(params.value);
          },
          comparator: (a: number, b: number) => {
            if (a == null) return -1;
            if (b == null) return 1;
            return Number(a) - Number(b);
          },
          suppressSorting: false, // Allows sorting of filter values
        },
        cellRenderer: function (params) {

          if (params.value < 2) {
            return "<div class='view-count-0-1'> 0-1 days</div>";

          }
          if (params.value > 1 && params.value < 6) {
            return "<div class='view-count-2-5'> 2-5 days</div>";

          }
          if (params.value > 5 && params.value < 16) {
            return "<div class='view-count-6-15'> 6-15 days</div>";

          }
          if (params.value >= 16) {
            return "<div class='view-count-gt-15'> 16+ days</div>";

          }
          return "";
        }

      },

I have a multi-select filter option on top of my ag-grid table. If I select 3 options out of them, the filter set to the model is given below. But ag-grid is not applying all the 3 options. It applies only 2. Is this a limitation of agNumberColumnFilter in ag-grid-angular ?

{
  "filterType": "number",
  "type": "number",
  "operator": "OR",
  "conditions": [
    {
      "type": "lessThan",
      "filter": 2
    },
    {
      "type": "inRange",
      "filter": 2,
      "filterTo": 5
    },
    {
      "type": "inRange",
      "filter": 6,
      "filterTo": 15
    }
  ]
}

Below is my ag-grid-angular and the definition for the column I am applying this filter for.

<ag-grid-angular #inboxGrid id="viewDetailsGrid"
                                class="ag-theme-balham view-details-grid mailbox-grid-unique-class mailbox-grid-tyle context-menu-style-override"
                                [columnDefs]="columnDefs" [masterDetail]="true"
                                [detailCellRenderer]="detailCellRenderer" [frameworkComponents]="frameworkComponents"
                                [rowData]="rowData" (gridReady)="onGridReady($event)" [rowClassRules]="rowClassRules"
                                [rowSelection]="rowSelection" (selectionChanged)="onSelectionChanged($event)"
                                [allowContextMenuWithControlKey]="true" [getContextMenuItems]="getContextMenuItems"
                                [headerHeight]="32" (rowGroupOpened)="onRowGroupOpened($event)" [enableColResize]="true"
                                (componentStateChanged)="inboxStateChanged($event)" [suppressMenuHide]="true"
                                [groupUseEntireRow]="true" [suppressPaginationPanel]="true"
                                [rowGroupPanelShow]="rowGroupPanelShow" [suppressDragLeaveHidesColumns]="true"
                                [suppressMakeColumnVisibleAfterUnGroup]="false"
                                (rowDoubleClicked)="rowDoubleClicked($event)"
                                [groupRowInnerRenderer]="groupRowInnerRenderer"
                                [groupRowRendererParams]="groupRowRendererParams" [popupParent]="popupParent"
                                (filterChanged)="filterChanged($event)" (firstDataRendered)="firstDataRendered($event)"
                                [getRowHeight]="getRowHeight" (rowDataChanged)="rowDataChanged($event)"
                                [enableCellChangeFlash]="false" [gridOptions]="gridOptions"
                                (columnResized)="onColumnResized($event)" (columnMoved)="ColumnMovedEvent($event)"
                                [suppressPropertyNamesCheck]=false (rowSelected)="onRowSelected($event)"
                                [suppressColumnVirtualisation]="true" (rowClicked)="onRowClicked($event)"
                                [modules]="modules" [embedFullWidthRows]="true" (bodyScroll)="onBodyScroll($event)"
                                [rememberGroupStateWhenNewData]="true" [getRowId]="getRowId"
                                [defaultColDef]="defaultColDef" [autoGroupColumnDef]="autoGroupColumnDef"
                                [groupMaintainOrder]="true" [groupDisplayType]="groupDisplayType"
                                (columnRowGroupChanged)="onColumnRowGroupChanged($event)"
                                ></ag-grid-angular>
                            
</div>

Definition:

      {
        "headerName": "View Count",
        "field": "viewCount",
        sortingOrder: ["asc", "desc"],
        hide: false,
        suppressMenu: false,
        resizable: true,
        suppressMovable: true,
        showInSecondary: false,
        suppressSizeToFit: true, 
        suppressColumnVirtualisation: true,
        width: 100%,
        minWidth: 330px,
        maxWidth: 700px,
        flex: 1,
        filter: "agNumberColumnFilter",
        menuTabs: ["filterMenuTab"],
        filterParams: {
          suppressMiniFilter: false,
          cellRenderer: (params: any) => {
            return params.value === null ? null : Number(params.value);
          },
          comparator: (a: number, b: number) => {
            if (a == null) return -1;
            if (b == null) return 1;
            return Number(a) - Number(b);
          },
          suppressSorting: false, // Allows sorting of filter values
        },
        cellRenderer: function (params) {

          if (params.value < 2) {
            return "<div class='view-count-0-1'> 0-1 days</div>";

          }
          if (params.value > 1 && params.value < 6) {
            return "<div class='view-count-2-5'> 2-5 days</div>";

          }
          if (params.value > 5 && params.value < 16) {
            return "<div class='view-count-6-15'> 6-15 days</div>";

          }
          if (params.value >= 16) {
            return "<div class='view-count-gt-15'> 16+ days</div>";

          }
          return "";
        }

      },
  • filter
  • ag-grid
  • ag-grid-angular
Share Improve this question edited Feb 1 at 8:05 Unnikrishnan Vasudevan asked Jan 31 at 17:10 Unnikrishnan VasudevanUnnikrishnan Vasudevan 112 bronze badges 1
  • Adding working sample would help people can reach your problem-case directly and increase possibility to get a hand – un.spike Commented Feb 2 at 7:44
Add a comment  | 

1 Answer 1

Reset to default 1

The default number of conditions allowed in the filter is 2. If you want to add more conditions, you can add { maxNumConditions: 1 } inside filterParams.

In your case,

{
        "headerName": "View Count",
        "field": "viewCount",
        sortingOrder: ["asc", "desc"],
        hide: false,
        suppressMenu: false,
        resizable: true,
        suppressMovable: true,
        showInSecondary: false,
        suppressSizeToFit: true, 
        suppressColumnVirtualisation: true,
        width: 100%,
        minWidth: 330px,
        maxWidth: 700px,
        flex: 1,
        filter: "agNumberColumnFilter",
        menuTabs: ["filterMenuTab"],
        filterParams: {
          maxNumConditions: 15,
          suppressMiniFilter: false,
          cellRenderer: (params: any) => {
            return params.value === null ? null : Number(params.value);
          },
          comparator: (a: number, b: number) => {
            if (a == null) return -1;
            if (b == null) return 1;
            return Number(a) - Number(b);
          },
          suppressSorting: false, // Allows sorting of filter values
        },
        cellRenderer: function (params) {

          if (params.value < 2) {
            return "<div class='view-count-0-1'> 0-1 days</div>";

          }
          if (params.value > 1 && params.value < 6) {
            return "<div class='view-count-2-5'> 2-5 days</div>";

          }
          if (params.value > 5 && params.value < 16) {
            return "<div class='view-count-6-15'> 6-15 days</div>";

          }
          if (params.value >= 16) {
            return "<div class='view-count-gt-15'> 16+ days</div>";

          }
          return "";
        }

      },

Here I set maxNumConditions as 15, meaning you can add upto 15 filter conditions in that particular column.

本文标签： Multiselect Filter in aggridangularStack Overflow

版权声明：本文标题：Multi-select Filter in ag-grid-angular - Stack Overflow 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.betaflare.com/web/1741903993a2404032.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。