CardView - demos - selection (DevExpress#29980)

Author: pomahtri

apps/demos/Demos/CardView/Selection/Angular/app/app.component.css

@@ -0,0 +1,31 @@
+.options {
+  margin-top: 20px;
+  padding: 20px;
+  background-color: rgba(191, 191, 191, 0.15);
+}
+
+.options-container {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+}
+
+.caption {
+  font-size: 18px;
+  font-weight: 500;
+}
+
+.option {
+  margin: 10px;
+  width: fit-content;
+}
+
+.option > .dx-selectbox {
+  width: 150px;
+  display: inline-block;
+  vertical-align: middle;
+}
+
+.option > span {
+  margin-right: 10px;
+}

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

@@ -1,6 +1,55 @@
-<dx-card-view id="cardView" [dataSource]="customers" keyExpr="ID">
-  <dxi-card-view-column
-    *ngFor="let column of columns"
-    [dataField]="column"
-  ></dxi-card-view-column>
+<div class="options">
+  <div class="caption">Options</div>
+  <div class="options-container">
+    <div class="option">
+      <span>Selection Mode</span>
+      <dx-select-box
+        [dataSource]="['single', 'multiple']"
+        [inputAttr]="{ 'aria-label': 'Selection Mode' }"
+        [(value)]="selectionMode"
+        (onValueChanged)="clearSelection()"
+      ></dx-select-box>
+    </div>
+    <div class="option">
+      <span>Show Checkboxes Mode</span>
+      <dx-select-box
+        [dataSource]="['always', 'none', 'onClick', 'onLongTap']"
+        [inputAttr]="{ 'aria-label': 'Show Checkboxes Mode' }"
+        [(value)]="showCheckBoxesMode"
+        [disabled]="selectionMode !== 'multiple'"
+      ></dx-select-box>
+    </div>
+    <div class="option">
+      <span>Select All Mode</span>
+      <dx-select-box
+        [dataSource]="['allPages', 'page']"
+        [inputAttr]="{ 'aria-label': 'Select All Mode' }"
+        [(value)]="selectAllMode"
+        [disabled]="selectionMode !== 'multiple' || !allowSelectAll"
+      ></dx-select-box>
+    </div>
+    <div class="option">
+      <dx-check-box
+        text="Allow Select All"
+        [(value)]="allowSelectAll"
+        [disabled]="selectionMode !== 'multiple'"
+      ></dx-check-box>
+    </div>
+  </div>
+</div>
+<dx-card-view [dataSource]="employees" keyExpr="ID" [selectedCardKeys]="[4, 6]">
+  <dxo-card-view-card-cover
+    [altExpr]="altExpr"
+    [imageExpr]="imageExpr"
+  ></dxo-card-view-card-cover>
+  <dxo-card-view-selection
+    [mode]="selectionMode"
+    [showCheckBoxesMode]="showCheckBoxesMode"
+    [allowSelectAll]="allowSelectAll"
+    [selectAllMode]="selectAllMode"
+  ></dxo-card-view-selection>
+  <dxi-card-view-column dataField="FullName"></dxi-card-view-column>
+  <dxi-card-view-column dataField="Position"></dxi-card-view-column>
+  <dxi-card-view-column dataField="Phone"></dxi-card-view-column>
+  <dxi-card-view-column dataField="Email"></dxi-card-view-column>
 </dx-card-view>

apps/demos/Demos/CardView/Selection/Angular/app/app.component.ts

@@ -1,8 +1,8 @@
-import { NgModule, Component, enableProdMode } from '@angular/core';
+import { NgModule, Component, enableProdMode, ViewChild } from '@angular/core';
 import { BrowserModule } from '@angular/platform-browser';
 import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
-import { DxCardViewModule } from 'devextreme-angular';
-import { Customer, Service } from './app.service';
+import { DxCardViewComponent, DxCardViewModule, DxSelectBoxModule, DxCheckBoxModule } from 'devextreme-angular';
+import { Employee, Service } from './app.service';
 
 if (!/localhost/.test(document.location.host)) {
   enableProdMode();
@@ -17,22 +17,45 @@ if (window && window.config?.packageConfigPaths) {
 @Component({
   selector: 'demo-app',
   templateUrl: `.${modulePrefix}/app.component.html`,
+  styleUrls: [`.${modulePrefix}/app.component.css`],
   providers: [Service],
 })
 export class AppComponent {
-  customers: Customer[];
+  @ViewChild(DxCardViewComponent, { static: true }) cardView: DxCardViewComponent;
 
-  columns = ['CompanyName', 'City', 'State', 'Phone', 'Fax'];
+  employees: Employee[];
+
+  selectionMode = 'multiple';
+
+  allowSelectAll = true;
+
+  showCheckBoxesMode = 'always';
+
+  selectAllMode = 'allPages';
 
   constructor(service: Service) {
-    this.customers = service.getCustomers();
+    this.employees = service.getEmployees();
+  }
+
+  altExpr({ FullName }: Employee): string {
+    return `Photo of ${FullName}`;
+  }
+
+  imageExpr({ FullName }: Employee): string {
+    return `../../../../images/employees/new/${FullName}.jpg`;
+  }
+
+  clearSelection() {
+    this.cardView.instance.clearSelection();
   }
 }
 
 @NgModule({
   imports: [
     BrowserModule,
     DxCardViewModule,
+    DxSelectBoxModule,
+    DxCheckBoxModule,
   ],
   declarations: [AppComponent],
   bootstrap: [AppComponent],