CardView - computed columns fixes (#30123)

Author: pomahtri

apps/demos/Demos/CardView/Overview/Angular/app/app.component.html

@@ -24,6 +24,8 @@
     <dxi-card-view-column
       caption="Full Name"
       [calculateFieldValue]="calculateFullName"
+      [allowFiltering]="true"
+      [allowSorting]="true"
     ></dxi-card-view-column>
     <dxi-card-view-column
       caption="Position"
@@ -38,6 +40,8 @@
     <dxi-card-view-column
       caption="Address"
       [calculateFieldValue]="calculateAddress"
+      [allowFiltering]="true"
+      [allowSorting]="true"
     ></dxi-card-view-column>
 
     <div

apps/demos/Demos/CardView/Overview/React/App.tsx

@@ -107,6 +107,8 @@ function App() {
       />
       <Column
         caption="Full Name"
+        allowFiltering={true}
+        allowSorting={true}
         calculateFieldValue={calculateFullName}
       />
       <Column
@@ -125,6 +127,8 @@ function App() {
       />
       <Column
         caption="Address"
+        allowFiltering={true}
+        allowSorting={true}
         calculateFieldValue={calculateAddress}
       />
     </CardView>

apps/demos/Demos/CardView/Overview/ReactJs/App.js

@@ -101,6 +101,8 @@ function App() {
       />
       <Column
         caption="Full Name"
+        allowFiltering={true}
+        allowSorting={true}
         calculateFieldValue={calculateFullName}
       />
       <Column
@@ -115,6 +117,8 @@ function App() {
       />
       <Column
         caption="Address"
+        allowFiltering={true}
+        allowSorting={true}
         calculateFieldValue={calculateAddress}
       />
     </CardView>

apps/demos/Demos/CardView/Overview/Vue/App.vue

@@ -28,6 +28,8 @@
     />
     <DxColumn
       caption="Full Name"
+      :allow-filtering="true"
+      :allow-sorting="true"
       :calculate-field-value="calculateFullName"
     />
     <DxColumn
@@ -46,6 +48,8 @@
     />
     <DxColumn
       caption="Address"
+      :allow-filtering="true"
+      :allow-sorting="true"
       :calculate-field-value="calculateAddress"
     />
     <template

apps/demos/Demos/CardView/Overview/jQuery/index.js

@@ -32,6 +32,8 @@ $(() => {
       },
       {
         caption: 'Full Name',
+        allowFiltering: true,
+        allowSorting: true,
         calculateFieldValue({ First_Name, Last_Name }) {
           return `${First_Name} ${Last_Name}`;
         },
@@ -52,6 +54,8 @@ $(() => {
       },
       {
         caption: 'Address',
+        allowFiltering: true,
+        allowSorting: true,
         calculateFieldValue({ State, City }) {
           return `${City}, ${State}`;
         }

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

@@ -71,6 +71,7 @@ test('getCombinedFilter API', async (t) => {
 }).before(async () => {
   await createWidget('dxCardView', {
     ...baseConfig,
+    remoteOperations: true, // NOTE: for more easy match of selector. If local, selector is func
   });
 });
 

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

@@ -500,6 +500,7 @@ test('Filtering should work when a custom data source is specified as an array o
 }).before(async () => {
   await createWidget('dxCardView', {
     ...baseConfig,
+    remoteOperations: true, // NOTE: for more easy match of selector. If local, selector is func
     columns: [
       {
         dataField: 'id',
@@ -523,6 +524,54 @@ test('Filtering should work when a custom data source is specified as an array o
   });
 });
 
+test('Filtering should work with computed column', async (t) => {
+  const cardView = new CardView('#container');
+
+  await t.click(cardView.getHeaderPanel().getHeaderItem(0).getFilterIcon());
+
+  await t
+    .expect(cardView.getHeaderFilterList().getItems().count)
+    .eql(4);
+
+  await t
+    .click(cardView.getHeaderFilterList().getItem(0).element)
+    .click(cardView.getHeaderFilterPopup().getOkButton().element);
+
+  await t
+    .expect(cardView.getCards().count)
+    .eql(1)
+    .expect(cardView.getCard(0).getFieldValueCell('Computed').textContent)
+    .eql('str_0');
+
+  await t.click(cardView.getHeaderPanel().getHeaderItem(0).getFilterIcon());
+  await t
+    .click(cardView.getHeaderFilterList().getItem(2).element)
+    .click(cardView.getHeaderFilterPopup().getOkButton().element);
+
+  await t
+    .expect(cardView.getCards().count)
+    .eql(2)
+    .expect(cardView.getCard(0).getFieldValueCell('Computed').textContent)
+    .eql('str_0')
+    .expect(cardView.getCard(1).getFieldValueCell('Computed').textContent)
+    .eql('str_2');
+}).before(async () => {
+  await createWidget('dxCardView', {
+    dataSource: [
+      { id: 0 }, { id: 1 }, { id: 2 }, { id: 3 },
+    ],
+    keyExpr: 'id',
+    headerFilter: { visible: true },
+    columns: [
+      {
+        caption: 'Computed',
+        allowFiltering: true,
+        calculateFieldValue: ({ id }) => `str_${id}`,
+      },
+    ],
+  });
+});
+
 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');
@@ -551,6 +600,7 @@ test('The item\'s selection state should be correct when a custom data source is
 }).before(async () => {
   await createWidget('dxCardView', {
     ...baseConfig,
+    remoteOperations: true, // NOTE: for more easy match of selector. If local, selector is func
     columns: [
       {
         dataField: 'id',

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

@@ -110,6 +110,7 @@ test('list should contain all values from computed column', async (t) => {
   columns: [
     {
       caption: 'Computed',
+      allowFiltering: true,
       calculateFieldValue: (data) => `${data.A}_${data.B}`,
     },
   ],

e2e/testcafe-devextreme/tests/cardView/sorting/behavior.functional.ts

@@ -474,3 +474,41 @@ const CLEAR_SORTING_MENUITEM_INDEX = 2;
     });
   });
 });
+
+test('Sorting should work with computed columns', async (t) => {
+  const cardView = new CardView('#container');
+  const headerItem = cardView.getHeaders().getHeaderItemByText('Computed');
+
+  await t.click(headerItem.element);
+
+  const getCardTexts = async () => {
+    await t.expect(cardView.getCards().count).eql(4);
+
+    return [
+      await cardView.getCard(0).getFieldValueCell('Computed').textContent,
+      await cardView.getCard(1).getFieldValueCell('Computed').textContent,
+      await cardView.getCard(2).getFieldValueCell('Computed').textContent,
+      await cardView.getCard(3).getFieldValueCell('Computed').textContent,
+    ];
+  };
+
+  await t.expect(await getCardTexts()).eql(['str_0', 'str_1', 'str_2', 'str_3']);
+
+  await t.click(headerItem.element);
+
+  await t.expect(await getCardTexts()).eql(['str_3', 'str_2', 'str_1', 'str_0']);
+}).before(async () => {
+  await createWidget('dxCardView', {
+    dataSource: [
+      { id: 0 }, { id: 1 }, { id: 2 }, { id: 3 },
+    ],
+    keyExpr: 'id',
+    columns: [
+      {
+        caption: 'Computed',
+        allowSorting: true,
+        calculateFieldValue: ({ id }) => `str_${id}`,
+      },
+    ],
+  });
+});

packages/devextreme/js/__internal/grids/new/grid_core/columns_controller/__snapshots__/columns_controller.test.ts.snap

@@ -39,6 +39,7 @@ exports[`ColumnsController columns should contain processed column configs 1`] =
     },
     "headerItemTemplate": undefined,
     "name": "a",
+    "selector": [Function],
     "setFieldValue": [Function],
     "showInColumnChooser": true,
     "trueText": "true",
@@ -83,6 +84,7 @@ exports[`ColumnsController columns should contain processed column configs 1`] =
     },
     "headerItemTemplate": undefined,
     "name": "b",
+    "selector": [Function],
     "setFieldValue": [Function],
     "showInColumnChooser": true,
     "trueText": "true",
@@ -127,6 +129,7 @@ exports[`ColumnsController columns should contain processed column configs 1`] =
     },
     "headerItemTemplate": undefined,
     "name": "c",
+    "selector": [Function],
     "setFieldValue": [Function],
     "showInColumnChooser": true,
     "trueText": "true",