CardView - Header Filter: Fix filtering when a custom headerFilter.dataSource is specified as an array of filter expressions (DevExpress#30022)

Co-authored-by: Alyar <>

Author: Alyar666

e2e/testcafe-devextreme/tests/cardView/headerFilter/common.functional.ts

@@ -473,3 +473,104 @@ test('FilterBuilder should work with custom headerFilter data source', async (t)
     filterPanel: { visible: true },
   });
 });
+
+test('Filtering should work when a custom data source is specified as an array of filter expressions', async (t) => {
+  // arrange
+  const cardView = new CardView('#container');
+
+  await t
+    .click(cardView.getHeaderPanel().getHeaderItem(0).getFilterIcon());
+
+  // assert
+  await t
+    .expect(cardView.getHeaderFilterList().getItems().count)
+    .eql(2);
+
+  // act
+  await t
+    .click(cardView.getHeaderFilterList().getItem(0).element)
+    .click(cardView.getHeaderFilterPopup().getOkButton().element);
+
+  // assert
+  await t
+    .expect(cardView.getCards().count)
+    .eql(1)
+    .expect(cardView.apiGetCombinedFilter())
+    .eql(['id', '=', 1]);
+}).before(async () => {
+  await createWidget('dxCardView', {
+    ...baseConfig,
+    columns: [
+      {
+        dataField: 'id',
+        headerFilter: {
+          dataSource: [
+            { value: ['id', '=', 1], text: '1' },
+            { value: ['id', '=', 2], text: '2' },
+          ],
+        },
+      },
+      {
+        dataField: 'title',
+      },
+      {
+        dataField: 'name',
+      },
+      {
+        dataField: 'lastName',
+      },
+    ],
+  });
+});
+
+test('The item\'s selection state should be correct when a custom data source is specified as an array of filter expressions', async (t) => {
+  // arrange
+  const cardView = new CardView('#container');
+
+  // assert
+  await t
+    .expect(cardView.getCards().count)
+    .eql(1)
+    .expect(cardView.apiGetCombinedFilter())
+    .eql(['id', '=', 1]);
+
+  // act
+  await t
+    .click(cardView.getHeaderPanel().getHeaderItem(0).getFilterIcon());
+
+  const firstHeaderFilterItem = cardView.getHeaderFilterList().getItem(0);
+
+  // assert
+  await t
+    .expect(cardView.getHeaderFilterList().getItems().count)
+    .eql(2)
+    .expect(firstHeaderFilterItem.text)
+    .eql('1')
+    .expect(firstHeaderFilterItem.isSelected)
+    .ok();
+}).before(async () => {
+  await createWidget('dxCardView', {
+    ...baseConfig,
+    columns: [
+      {
+        dataField: 'id',
+        filterValues: [['id', '=', 1]],
+        headerFilter: {
+          dataSource: [
+            { value: ['id', '=', 1], text: '1' },
+            { value: ['id', '=', 2], text: '2' },
+          ],
+        },
+      },
+      {
+        dataField: 'title',
+      },
+      {
+        dataField: 'name',
+      },
+      {
+        dataField: 'lastName',
+      },
+    ],
+  });
+});

packages/devextreme/js/__internal/grids/new/grid_core/filtering/header_filter/utils.test.ts

@@ -366,6 +366,37 @@ describe('HeaderFilter', () => {
           }] as unknown[],
           result: [['ID1', 'noneof', [1, 2, 3]], 'and', ['ID2', '<>', 'test1']],
         },
+        {
+          caseName: 'one column has an array of filter expressions',
+          columns: [{
+            ...allowFilteringColumnConfig,
+            dataField: 'ID1',
+            filterValues: [['ID1', '>', 5], ['ID1', '<', 10]],
+          }] as unknown[],
+          result: [[['ID1', '>', 5], 'or', ['ID1', '<', 10]]],
+        },
+        {
+          caseName: 'one column has an array of plain value and filter expressions',
+          columns: [{
+            ...allowFilteringColumnConfig,
+            dataField: 'ID1',
+            filterValues: [5, ['ID1', '=', 10]],
+          }] as unknown[],
+          result: [[['ID1', '=', 5], 'or', ['ID1', '=', 10]]],
+        },
+        {
+          caseName: 'two column have an array of filter expressions',
+          columns: [{
+            ...allowFilteringColumnConfig,
+            dataField: 'ID1',
+            filterValues: [['ID1', '>', 5], ['ID1', '<', 10]],
+          }, {
+            ...allowFilteringColumnConfig,
+            dataField: 'ID2',
+            filterValues: [['ID2', '>', 6], ['ID2', '<', 9]],
+          }] as unknown[],
+          result: [[['ID1', '>', 5], 'or', ['ID1', '<', 10]], 'and', [['ID2', '>', 6], 'or', ['ID2', '<', 9]]],
+        },
       ])('$caseName: should correctly calculate the header filter', ({ columns, result }) => {
         const headerFilter = utils.getComposedHeaderFilter(columns as Column[]);
 

packages/devextreme/js/__internal/grids/new/grid_core/filtering/header_filter/utils.ts

@@ -1,6 +1,7 @@
 import type { FilterType } from '@js/common/grids';
 import errors from '@js/core/errors';
 import { isDefined } from '@js/core/utils/type';
+import gridCoreUtils from '@ts/grids/grid_core/m_utils';
 import type { Column } from '@ts/grids/new/grid_core/columns_controller/types';
 
 import type { FilterValue } from '../types';
@@ -67,22 +68,40 @@ export const needCreateHeaderFilter = (column: Column): boolean => {
   return isFilteringAllowed(column) && hasSelectedItems;
 };
 
+const getFilterExpression = (filterValues: FilterValue, column: Column): FilterValue => {
+  const columnName = getColumnName(column);
+  const hasGroupInterval = !!column.headerFilter?.groupInterval;
+
+  const needNormalizeFilterValues = filterValues?.length === 1
+    && !hasGroupInterval;
+  const normalizedFilterValues = needNormalizeFilterValues
+    ? filterValues[0]
+    : filterValues;
+  const filterOperator = getFilterOperator(normalizedFilterValues, column.filterType);
+
+  return [columnName, filterOperator, normalizedFilterValues];
+};
+
 export const getComposedHeaderFilter = (columns: Column[]): FilterValue => {
   const filterValue: FilterValue = [];
   const filterableColumns = columns.filter((col) => needCreateHeaderFilter(col));
 
   filterableColumns.forEach((column, index) => {
     const { filterValues } = column;
-    const columnName = getColumnName(column);
-    const hasGroupInterval = !!column.headerFilter?.groupInterval;
+    const normalizedFilterValues = Array.isArray(filterValues)
+      ? filterValues
+      : [filterValues];
+
+    const filterValuesWithExpressions = normalizedFilterValues
+      .filter((value) => Array.isArray(value));
+    const filterValuesWithoutExpressions = normalizedFilterValues
+      .filter((value) => !Array.isArray(value));
 
-    const needNormalizeFilterValues = filterValues?.length === 1 && !hasGroupInterval;
-    const normalizedFilterValues = needNormalizeFilterValues
-      ? filterValues[0]
-      : filterValues;
-    const filterOperator = getFilterOperator(normalizedFilterValues, column.filterType);
+    const filterExpression = filterValuesWithoutExpressions.length
+      ? [getFilterExpression(filterValuesWithoutExpressions, column)]
+      : [];
 
-    filterValue.push([columnName, filterOperator, normalizedFilterValues]);
+    filterValue.push(gridCoreUtils.combineFilters([...filterExpression, ...filterValuesWithExpressions], 'or'));
 
     if (index < filterableColumns.length - 1) {
       filterValue.push('and');