1

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

      },
1
  • Adding working sample would help people can reach your problem-case directly and increase possibility to get a hand Commented Feb 2 at 7:44

1 Answer 1

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.

Sign up to request clarification or add additional context in comments.

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.