Your search did not match any results.

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.