Card View - Selection

DevExtreme CardView supports single select and multiselect modes. Set selection.mode to either "single" or "multiple" to enable this capability.

Backend API

@model IEnumerable<DevExtreme.NETCore.Demos.Models.CardView.Selection.Employee> <div class="options"> <div class="caption">Options</div> <div class="options-container"> <div class="option"> <span>Selection Mode</span> @(Html.DevExtreme().SelectBox() .ID("selection-mode") .DataSource(new object[] { "single", "multiple" }) .Value("multiple") .InputAttr("aria-label", "Selection Mode") .OnValueChanged(@<text> function({ value }) { const cardView = $('#card-view').dxCardView('instance'); cardView.option('selection.mode', value); cardView.clearSelection(); updateDisabledOptions(); } </text>) ) </div> <div class="option"> <span>Show Checkboxes Mode</span> @(Html.DevExtreme().SelectBox() .ID("show-checkboxes-mode") .DataSource(new object[] { "always", "none", "onClick", "onLongTap" }) .Value("always") .InputAttr("aria-label", "Show Checkboxes Mode") .OnValueChanged(@<text> function({ value }) { const cardView = $('#card-view').dxCardView('instance'); cardView.option('selection.showCheckBoxesMode', value); updateDisabledOptions(); } </text>) ) </div> <div class="option"> <span>Select All Mode</span> @(Html.DevExtreme().SelectBox() .ID("select-all-mode") .DataSource(new object[] { "allPages", "page" }) .Value("allPages") .InputAttr("aria-label", "Select All Mode") .OnValueChanged(@<text> function({ value }) { const cardView = $('#card-view').dxCardView('instance'); cardView.option('selection.selectAllMode', value); updateDisabledOptions(); } </text>) ) </div> <div class="option"> @(Html.DevExtreme().CheckBox() .ID("allow-select-all") .Text("Allow Select All") .Value(true) .OnValueChanged(@<text> function({ value }) { const cardView = $('#card-view').dxCardView('instance'); cardView.option('selection.allowSelectAll', value); updateDisabledOptions(); } </text>) ) </div> </div> </div> @(Html.DevExtreme().CardView() .ID("card-view") .DataSource(Model, "ID") .CardsPerRow(Mode.Auto) .CardMinWidth(300) .Selection(s => s.Mode(SingleMultipleOrNone.Multiple)) .SelectedCardKeys(new object[] { 4, 6 }) .SearchPanel(sp => sp.Visible(true)) .CardCover(cc => { cc .ImageExpr(new JS("cardCoverImageExpr")) .AltExpr(new JS("cardCoverAltExpr")); }) .Columns(c => { c.Add().DataField("FullName"); c.Add().DataField("Position"); c.Add().DataField("Phone"); c.Add().DataField("Email"); }) ) <script> function cardCoverImageExpr({ FullName }) { return `@Url.Content("~/images/employees/new")/${FullName}.jpg`; } function cardCoverAltExpr({ FullName }) { return `Photo of ${FullName}`; } function updateDisabledOptions() { const cardView = $('#card-view').dxCardView('instance'); $("#show-checkboxes-mode").dxSelectBox('instance').option( 'disabled', cardView.option('selection.mode') !== 'multiple', ); $("#allow-select-all").dxCheckBox('instance').option( 'disabled', cardView.option('selection.mode') !== 'multiple', ); $("#select-all-mode").dxSelectBox('instance').option( 'disabled', cardView.option('selection.mode') !== 'multiple' || !cardView.option('selection.allowSelectAll') ); } </script>

using Microsoft.AspNetCore.Mvc; using DevExtreme.NETCore.Demos.Models.CardView.ColumnChooser; using DevExtreme.NETCore.Demos.Models.CardView.ColumnHeaderFilter; using DevExtreme.NETCore.Demos.Models.CardView.ColumnReordering; using DevExtreme.NETCore.Demos.Models.CardView.DataValidation; using DevExtreme.NETCore.Demos.Models.CardView.FilterPanel; using DevExtreme.NETCore.Demos.Models.CardView.Overview; using DevExtreme.NETCore.Demos.Models.CardView.PopupEditing; using DevExtreme.NETCore.Demos.Models.CardView.SearchPanel; using DevExtreme.NETCore.Demos.Models.CardView.Selection; using DevExtreme.NETCore.Demos.Models.CardView.SimpleArray; using DevExtreme.NETCore.Demos.Models.CardView.Sorting; using DevExtreme.NETCore.Demos.Models.SampleData; namespace DevExtreme.NETCore.Demos.Controllers { public class CardViewController : Controller { public ActionResult Selection() { return View(SelectionSampleData.Employees); } } }

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

Use the following properties to configure CardView selection:

allowSelectAll
Allows users to select all or current page cards (based on selectAllMode).
selectAllMode
Specifies mode used to select all cards. Applies only if selection.allowSelectAll is true.
showCheckBoxesMode
Specifies when to display card selection checkboxes.