DevExpress · pomahtri · Apr 9, 2025 · Mar 31, 2025 · Apr 6, 2025 · Apr 7, 2025
diff --git a/...w_checkbox_visibility_with_showCheckBoxesMode_=_onClick (fluent-blue-light).png b/...w_checkbox_visibility_with_showCheckBoxesMode_=_onClick (fluent-blue-light).png
diff --git a/...-view_checkbox_visibility_with_showCheckBoxesMode_=_onClick (generic-light).png b/...-view_checkbox_visibility_with_showCheckBoxesMode_=_onClick (generic-light).png
diff --git a/...checkbox_visibility_with_showCheckBoxesMode_=_onClick (material-blue-light).png b/...checkbox_visibility_with_showCheckBoxesMode_=_onClick (material-blue-light).png
diff --git a/...checkboxes_visibility_with_showCheckBoxesMode_=_onClick (fluent-blue-light).png b/...checkboxes_visibility_with_showCheckBoxesMode_=_onClick (fluent-blue-light).png
diff --git a/...iew_checkboxes_visibility_with_showCheckBoxesMode_=_onClick (generic-light).png b/...iew_checkboxes_visibility_with_showCheckBoxesMode_=_onClick (generic-light).png
diff --git a/...eckboxes_visibility_with_showCheckBoxesMode_=_onClick (material-blue-light).png b/...eckboxes_visibility_with_showCheckBoxesMode_=_onClick (material-blue-light).png
diff --git a/...iew_miltiple_selection_with_showCheckBoxesMode_=_always (fluent-blue-light).png b/...iew_miltiple_selection_with_showCheckBoxesMode_=_always (fluent-blue-light).png
diff --git a/...rd-view_miltiple_selection_with_showCheckBoxesMode_=_always (generic-light).png b/...rd-view_miltiple_selection_with_showCheckBoxesMode_=_always (generic-light).png
diff --git a/...w_miltiple_selection_with_showCheckBoxesMode_=_always (material-blue-light).png b/...w_miltiple_selection_with_showCheckBoxesMode_=_always (material-blue-light).png
diff --git a/...-view_miltiple_selection_with_showCheckBoxesMode_=_none (fluent-blue-light).png b/...-view_miltiple_selection_with_showCheckBoxesMode_=_none (fluent-blue-light).png
diff --git a/...card-view_miltiple_selection_with_showCheckBoxesMode_=_none (generic-light).png b/...card-view_miltiple_selection_with_showCheckBoxesMode_=_none (generic-light).png
diff --git a/...iew_miltiple_selection_with_showCheckBoxesMode_=_none (material-blue-light).png b/...iew_miltiple_selection_with_showCheckBoxesMode_=_none (material-blue-light).png
diff --git a/..._miltiple_selection_with_showCheckBoxesMode_=_onClick_1 (fluent-blue-light).png b/..._miltiple_selection_with_showCheckBoxesMode_=_onClick_1 (fluent-blue-light).png
diff --git a/...view_miltiple_selection_with_showCheckBoxesMode_=_onClick_1 (generic-light).png b/...view_miltiple_selection_with_showCheckBoxesMode_=_onClick_1 (generic-light).png
diff --git a/...iltiple_selection_with_showCheckBoxesMode_=_onClick_1 (material-blue-light).png b/...iltiple_selection_with_showCheckBoxesMode_=_onClick_1 (material-blue-light).png
diff --git a/..._miltiple_selection_with_showCheckBoxesMode_=_onClick_2 (fluent-blue-light).png b/..._miltiple_selection_with_showCheckBoxesMode_=_onClick_2 (fluent-blue-light).png
diff --git a/...view_miltiple_selection_with_showCheckBoxesMode_=_onClick_2 (generic-light).png b/...view_miltiple_selection_with_showCheckBoxesMode_=_onClick_2 (generic-light).png
diff --git a/...iltiple_selection_with_showCheckBoxesMode_=_onClick_2 (material-blue-light).png b/...iltiple_selection_with_showCheckBoxesMode_=_onClick_2 (material-blue-light).png
diff --git a/..._miltiple_selection_with_showCheckBoxesMode_=_onClick_3 (fluent-blue-light).png b/..._miltiple_selection_with_showCheckBoxesMode_=_onClick_3 (fluent-blue-light).png
diff --git a/...view_miltiple_selection_with_showCheckBoxesMode_=_onClick_3 (generic-light).png b/...view_miltiple_selection_with_showCheckBoxesMode_=_onClick_3 (generic-light).png
diff --git a/...iltiple_selection_with_showCheckBoxesMode_=_onClick_3 (material-blue-light).png b/...iltiple_selection_with_showCheckBoxesMode_=_onClick_3 (material-blue-light).png
diff --git a/...iltiple_selection_with_showCheckBoxesMode_=_onLongTap_1 (fluent-blue-light).png b/...iltiple_selection_with_showCheckBoxesMode_=_onLongTap_1 (fluent-blue-light).png
diff --git a/...ew_miltiple_selection_with_showCheckBoxesMode_=_onLongTap_1 (generic-light).png b/...ew_miltiple_selection_with_showCheckBoxesMode_=_onLongTap_1 (generic-light).png
diff --git a/...tiple_selection_with_showCheckBoxesMode_=_onLongTap_1 (material-blue-light).png b/...tiple_selection_with_showCheckBoxesMode_=_onLongTap_1 (material-blue-light).png
diff --git a/...iltiple_selection_with_showCheckBoxesMode_=_onLongTap_2 (fluent-blue-light).png b/...iltiple_selection_with_showCheckBoxesMode_=_onLongTap_2 (fluent-blue-light).png
diff --git a/...ew_miltiple_selection_with_showCheckBoxesMode_=_onLongTap_2 (generic-light).png b/...ew_miltiple_selection_with_showCheckBoxesMode_=_onLongTap_2 (generic-light).png
diff --git a/...tiple_selection_with_showCheckBoxesMode_=_onLongTap_2 (material-blue-light).png b/...tiple_selection_with_showCheckBoxesMode_=_onLongTap_2 (material-blue-light).png
diff --git a/...iltiple_selection_with_showCheckBoxesMode_=_onLongTap_3 (fluent-blue-light).png b/...iltiple_selection_with_showCheckBoxesMode_=_onLongTap_3 (fluent-blue-light).png
diff --git a/...ew_miltiple_selection_with_showCheckBoxesMode_=_onLongTap_3 (generic-light).png b/...ew_miltiple_selection_with_showCheckBoxesMode_=_onLongTap_3 (generic-light).png
diff --git a/...tiple_selection_with_showCheckBoxesMode_=_onLongTap_3 (material-blue-light).png b/...tiple_selection_with_showCheckBoxesMode_=_onLongTap_3 (material-blue-light).png
diff --git a/...etalons/card-view_miltiple_selection_without_select-all (fluent-blue-light).png b/...etalons/card-view_miltiple_selection_without_select-all (fluent-blue-light).png
diff --git a/...ion/etalons/card-view_miltiple_selection_without_select-all (generic-light).png b/...ion/etalons/card-view_miltiple_selection_without_select-all (generic-light).png
diff --git a/...alons/card-view_miltiple_selection_without_select-all (material-blue-light).png b/...alons/card-view_miltiple_selection_without_select-all (material-blue-light).png
diff --git a/...s/cardView/selection/etalons/card-view_single_selection (fluent-blue-light).png b/...s/cardView/selection/etalons/card-view_single_selection (fluent-blue-light).png
diff --git a/...tests/cardView/selection/etalons/card-view_single_selection (generic-light).png b/...tests/cardView/selection/etalons/card-view_single_selection (generic-light).png
diff --git a/...cardView/selection/etalons/card-view_single_selection (material-blue-light).png b/...cardView/selection/etalons/card-view_single_selection (material-blue-light).png
diff --git a/e2e/testcafe-devextreme/tests/cardView/selection/functional.ts b/e2e/testcafe-devextreme/tests/cardView/selection/functional.ts
diff --git a/e2e/testcafe-devextreme/tests/cardView/selection/visual.ts b/e2e/testcafe-devextreme/tests/cardView/selection/visual.ts
@@ -0,0 +1,355 @@
+import CardView from 'devextreme-testcafe-models/cardView';
+import { createScreenshotsComparer } from 'devextreme-screenshot-comparer';
+import { ClientFunction } from 'testcafe';
+import url from '../../../helpers/getPageUrl';
+import { createWidget } from '../../../helpers/createWidget';
+import { testScreenshot } from '../../../helpers/themeUtils';
+
+fixture`Selection.Visual`
+  .page(url(__dirname, '../../container.html'));
+
+const CARD_VIEW_SELECTOR = '#container';
+
+test('Single mode', async (t) => {
+  const { takeScreenshot, compareResults } = createScreenshotsComparer(t);
+  const cardView = new CardView(CARD_VIEW_SELECTOR);
+
+  await testScreenshot(t, takeScreenshot, 'card-view_single_selection.png', { element: cardView.element });
+
+  await t
+    .expect(compareResults.isValid())
+    .ok(compareResults.errorMessages());
+}).before(async () => createWidget('dxCardView', {
+  dataSource: [
+    {
+      id: 0, title: 'header1', A: 'A_0', B: 'B_0', C: 'C_0',
+    },
+    {
+      id: 1, title: 'header2', A: 'A_1', B: 'B_1', C: 'C_1',
+    },
+    {
+      id: 2, title: 'header3', A: 'A_2', B: 'B_2', C: 'C_2',
+    },
+    {
+      id: 3, title: 'header4', A: 'A_3', B: 'B_3', C: 'C_3',
+    },
+    {
+      id: 4, title: 'header5', A: 'A_4', B: 'B_4', C: 'C_4',
+    },
+  ],
+  cardHeader: {
+    captionExpr: () => 'title',
+  },
+  columns: ['A', 'B', 'C'],
+  keyExpr: 'id',
+  height: 700,
+  selectedCardKeys: [0],
+  selection: {
+    mode: 'single',
+  },
+}));
+
+test('Multiple mode with Select All/Deselect All and showCheckBoxesMode = \'none\'', async (t) => {
+  const { takeScreenshot, compareResults } = createScreenshotsComparer(t);
+  const cardView = new CardView(CARD_VIEW_SELECTOR);
+
+  await testScreenshot(t, takeScreenshot, 'card-view_miltiple_selection_with_showCheckBoxesMode_=_none.png', { element: cardView.element });
+
+  await t
+    .expect(compareResults.isValid())
+    .ok(compareResults.errorMessages());
+}).before(async () => createWidget('dxCardView', {
+  dataSource: [
+    {
+      id: 0, title: 'header1', A: 'A_0', B: 'B_0', C: 'C_0',
+    },
+    {
+      id: 1, title: 'header2', A: 'A_1', B: 'B_1', C: 'C_1',
+    },
+    {
+      id: 2, title: 'header3', A: 'A_2', B: 'B_2', C: 'C_2',
+    },
+    {
+      id: 3, title: 'header4', A: 'A_3', B: 'B_3', C: 'C_3',
+    },
+    {
+      id: 4, title: 'header5', A: 'A_4', B: 'B_4', C: 'C_4',
+    },
+  ],
+  cardHeader: {
+    captionExpr: () => 'title',
+  },
+  columns: ['A', 'B', 'C'],
+  keyExpr: 'id',
+  height: 700,
+  selection: {
+    mode: 'multiple',
+    showCheckBoxesMode: 'none',
+    allowSelectAll: true,
+  },
+}));
+
+test('Multiple mode with Select All/Deselect All and showCheckBoxesMode = \'always\'', async (t) => {
+  const { takeScreenshot, compareResults } = createScreenshotsComparer(t);
+  const cardView = new CardView(CARD_VIEW_SELECTOR);
+
+  await testScreenshot(t, takeScreenshot, 'card-view_miltiple_selection_with_showCheckBoxesMode_=_always.png', { element: cardView.element });
+
+  await t
+    .expect(compareResults.isValid())
+    .ok(compareResults.errorMessages());
+}).before(async () => createWidget('dxCardView', {
+  dataSource: [
+    {
+      id: 0, title: 'header1', A: 'A_0', B: 'B_0', C: 'C_0',
+    },
+    {
+      id: 1, title: 'header2', A: 'A_1', B: 'B_1', C: 'C_1',
+    },
+    {
+      id: 2, title: 'header3', A: 'A_2', B: 'B_2', C: 'C_2',
+    },
+    {
+      id: 3, title: 'header4', A: 'A_3', B: 'B_3', C: 'C_3',
+    },
+    {
+      id: 4, title: 'header5', A: 'A_4', B: 'B_4', C: 'C_4',
+    },
+  ],
+  cardHeader: {
+    captionExpr: () => 'title',
+  },
+  columns: ['A', 'B', 'C'],
+  keyExpr: 'id',
+  height: 700,
+  selection: {
+    mode: 'multiple',
+    showCheckBoxesMode: 'always',
+    allowSelectAll: true,
+  },
+}));
+
+test('Multiple mode with Select All/Deselect All and showCheckBoxesMode = \'onClick\'', async (t) => {
+  const { takeScreenshot, compareResults } = createScreenshotsComparer(t);
+  const cardView = new CardView(CARD_VIEW_SELECTOR);
+  const firstSelectCheckboxItemContent = cardView
+    .getCard(0)
+    .getToolbarItemContent(0);
+
+  await testScreenshot(t, takeScreenshot, 'card-view_miltiple_selection_with_showCheckBoxesMode_=_onClick_1.png', { element: cardView.element });
+
+  await t.hover(firstSelectCheckboxItemContent);
+
+  await testScreenshot(t, takeScreenshot, 'card-view_miltiple_selection_with_showCheckBoxesMode_=_onClick_2.png', { element: cardView.element });
+
+  await t.hover(cardView.element);
+
+  await testScreenshot(t, takeScreenshot, 'card-view_miltiple_selection_with_showCheckBoxesMode_=_onClick_3.png', { element: cardView.element });
+
+  await t
+    .expect(compareResults.isValid())
+    .ok(compareResults.errorMessages());
+}).before(async () => createWidget('dxCardView', {
+  dataSource: [
+    {
+      id: 0, title: 'header1', A: 'A_0', B: 'B_0', C: 'C_0',
+    },
+    {
+      id: 1, title: 'header2', A: 'A_1', B: 'B_1', C: 'C_1',
+    },
+    {
+      id: 2, title: 'header3', A: 'A_2', B: 'B_2', C: 'C_2',
+    },
+    {
+      id: 3, title: 'header4', A: 'A_3', B: 'B_3', C: 'C_3',
+    },
+    {
+      id: 4, title: 'header5', A: 'A_4', B: 'B_4', C: 'C_4',
+    },
+  ],
+  cardHeader: {
+    captionExpr: () => 'title',
+  },
+  columns: ['A', 'B', 'C'],
+  keyExpr: 'id',
+  height: 700,
+  selection: {
+    mode: 'multiple',
+    showCheckBoxesMode: 'onClick',
+    allowSelectAll: true,
+  },
+}));
+
+test('Multiple mode with a selected card and showCheckBoxesMode = \'onClick\'', async (t) => {
+  const { takeScreenshot, compareResults } = createScreenshotsComparer(t);
+  const cardView = new CardView(CARD_VIEW_SELECTOR);
+
+  await testScreenshot(t, takeScreenshot, 'card-view_checkbox_visibility_with_showCheckBoxesMode_=_onClick.png', { element: cardView.element });
+
+  await t
+    .expect(compareResults.isValid())
+    .ok(compareResults.errorMessages());
+}).before(async () => createWidget('dxCardView', {
+  dataSource: [
+    {
+      id: 0, title: 'header1', A: 'A_0', B: 'B_0', C: 'C_0',
+    },
+    {
+      id: 1, title: 'header2', A: 'A_1', B: 'B_1', C: 'C_1',
+    },
+    {
+      id: 2, title: 'header3', A: 'A_2', B: 'B_2', C: 'C_2',
+    },
+    {
+      id: 3, title: 'header4', A: 'A_3', B: 'B_3', C: 'C_3',
+    },
+    {
+      id: 4, title: 'header5', A: 'A_4', B: 'B_4', C: 'C_4',
+    },
+  ],
+  cardHeader: {
+    captionExpr: () => 'title',
+  },
+  columns: ['A', 'B', 'C'],
+  selectedCardKeys: [0],
+  keyExpr: 'id',
+  height: 700,
+  selection: {
+    mode: 'multiple',
+    showCheckBoxesMode: 'onClick',
+    allowSelectAll: true,
+  },
+}));
+
+test('Multiple mode with selected cards and showCheckBoxesMode = \'onClick\'', async (t) => {
+  const { takeScreenshot, compareResults } = createScreenshotsComparer(t);
+  const cardView = new CardView(CARD_VIEW_SELECTOR);
+
+  await testScreenshot(t, takeScreenshot, 'card-view_checkboxes_visibility_with_showCheckBoxesMode_=_onClick.png', { element: cardView.element });
+
+  await t
+    .expect(compareResults.isValid())
+    .ok(compareResults.errorMessages());
+}).before(async () => createWidget('dxCardView', {
+  dataSource: [
+    {
+      id: 0, title: 'header1', A: 'A_0', B: 'B_0', C: 'C_0',
+    },
+    {
+      id: 1, title: 'header2', A: 'A_1', B: 'B_1', C: 'C_1',
+    },
+    {
+      id: 2, title: 'header3', A: 'A_2', B: 'B_2', C: 'C_2',
+    },
+    {
+      id: 3, title: 'header4', A: 'A_3', B: 'B_3', C: 'C_3',
+    },
+    {
+      id: 4, title: 'header5', A: 'A_4', B: 'B_4', C: 'C_4',
+    },
+  ],
+  cardHeader: {
+    captionExpr: () => 'title',
+  },
+  columns: ['A', 'B', 'C'],
+  selectedCardKeys: [0, 1],
+  keyExpr: 'id',
+  height: 700,
+  selection: {
+    mode: 'multiple',
+    showCheckBoxesMode: 'onClick',
+    allowSelectAll: true,
+  },
+}));
+
+test('Multiple mode with Select All/Deselect All and showCheckBoxesMode = \'onLongTap\'', async (t) => {
+  const { takeScreenshot, compareResults } = createScreenshotsComparer(t);
+  const cardView = new CardView(CARD_VIEW_SELECTOR);
+  const firstCard = cardView.getCard(0);
+
+  await testScreenshot(t, takeScreenshot, 'card-view_miltiple_selection_with_showCheckBoxesMode_=_onLongTap_1.png', { element: cardView.element });
+
+  await ClientFunction((card) => {
+    $(card()).trigger('dxhold');
+  })(firstCard.element);
+
+  await testScreenshot(t, takeScreenshot, 'card-view_miltiple_selection_with_showCheckBoxesMode_=_onLongTap_2.png', { element: cardView.element });
+
+  await ClientFunction((card) => {
+    $(card()).trigger('dxhold');
+  })(firstCard.element);
+
+  await testScreenshot(t, takeScreenshot, 'card-view_miltiple_selection_with_showCheckBoxesMode_=_onLongTap_3.png', { element: cardView.element });
+
+  await t
+    .expect(compareResults.isValid())
+    .ok(compareResults.errorMessages());
+}).before(async () => createWidget('dxCardView', {
+  dataSource: [
+    {
+      id: 0, title: 'header1', A: 'A_0', B: 'B_0', C: 'C_0',
+    },
+    {
+      id: 1, title: 'header2', A: 'A_1', B: 'B_1', C: 'C_1',
+    },
+    {
+      id: 2, title: 'header3', A: 'A_2', B: 'B_2', C: 'C_2',
+    },
+    {
+      id: 3, title: 'header4', A: 'A_3', B: 'B_3', C: 'C_3',
+    },
+    {
+      id: 4, title: 'header5', A: 'A_4', B: 'B_4', C: 'C_4',
+    },
+  ],
+  cardHeader: {
+    captionExpr: () => 'title',
+  },
+  columns: ['A', 'B', 'C'],
+  keyExpr: 'id',
+  height: 700,
+  selection: {
+    mode: 'multiple',
+    showCheckBoxesMode: 'onLongTap',
+    allowSelectAll: true,
+  },
+}));
+
+test('Multiple mode without Select All/Deselect All', async (t) => {
+  const { takeScreenshot, compareResults } = createScreenshotsComparer(t);
+  const cardView = new CardView(CARD_VIEW_SELECTOR);
+
+  await testScreenshot(t, takeScreenshot, 'card-view_miltiple_selection_without_select-all.png', { element: cardView.element });
+
+  await t
+    .expect(compareResults.isValid())
+    .ok(compareResults.errorMessages());
+}).before(async () => createWidget('dxCardView', {
+  dataSource: [
+    {
+      id: 0, title: 'header1', A: 'A_0', B: 'B_0', C: 'C_0',
+    },
+    {
+      id: 1, title: 'header2', A: 'A_1', B: 'B_1', C: 'C_1',
+    },
+    {
+      id: 2, title: 'header3', A: 'A_2', B: 'B_2', C: 'C_2',
+    },
+    {
+      id: 3, title: 'header4', A: 'A_3', B: 'B_3', C: 'C_3',
+    },
+    {
+      id: 4, title: 'header5', A: 'A_4', B: 'B_4', C: 'C_4',
+    },
+  ],
+  cardHeader: {
+    captionExpr: () => 'title',
+  },
+  columns: ['A', 'B', 'C'],
+  keyExpr: 'id',
+  height: 700,
+  selection: {
+    mode: 'multiple',
+    allowSelectAll: false,
+  },
+}));
diff --git a/packages/devextreme-scss/scss/widgets/base/cardView/content_view/content/card/_index.scss b/packages/devextreme-scss/scss/widgets/base/cardView/content_view/content/card/_index.scss
@@ -10,4 +10,9 @@
   border: $cardview-card-border-size solid $cardview-card-border-color;
   border-radius: $cardview-card-border-radius;
   background-color: $cardview-card-background-color;
+  overflow: hidden;
+}
+
+.dx-cardview-card-selection {
+  background-color: $cardview-card-selection-background-color;
 }
diff --git a/...ages/devextreme-scss/scss/widgets/base/cardView/content_view/content/card/_variables.scss b/...ages/devextreme-scss/scss/widgets/base/cardView/content_view/content/card/_variables.scss
@@ -4,3 +4,4 @@ $cardview-card-border-size: null !default;
 $cardview-card-min-width: null !default;
 $cardview-card-border-radius: null !default;
 $cardview-card-background-color: null !default;
+$cardview-card-selection-background-color: null !default;
diff --git a/...s/devextreme-scss/scss/widgets/base/cardView/content_view/content/card/header/_index.scss b/...s/devextreme-scss/scss/widgets/base/cardView/content_view/content/card/header/_index.scss
@@ -11,3 +11,27 @@
     }
   }
 }
+
+.dx-cardview-select-checkboxes-hidden .dx-cardview-card:not(.dx-cardview-card-selection) .dx-cardview-select-checkbox {
+  .dx-checkbox {
+    display: none;
+  }
+
+  .dx-toolbar-item-content::before {
+    content: '';
+    width: 20px;
+    height: 20px;
+    display: inline-block;
+    pointer-events: none;
+  }
+
+  .dx-toolbar-item-content:hover {
+    &::before {
+      display: none;
+    }
+
+    .dx-checkbox {
+      display: inline-block;
+    }
+  }
+}