Data Grids / Data Management ▸ Selection

@model IEnumerable<DevExtreme.MVC.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("~/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 DevExtreme.MVC.Demos.Models.CardView.ColumnChooser;
using DevExtreme.MVC.Demos.Models.CardView.ColumnHeaderFilter;
using DevExtreme.MVC.Demos.Models.CardView.ColumnReordering;
using DevExtreme.MVC.Demos.Models.CardView.DataValidation;
using DevExtreme.MVC.Demos.Models.CardView.FilterPanel;
using DevExtreme.MVC.Demos.Models.CardView.Overview;
using DevExtreme.MVC.Demos.Models.CardView.PopupEditing;
using DevExtreme.MVC.Demos.Models.CardView.SearchPanel;
using DevExtreme.MVC.Demos.Models.CardView.Selection;
using DevExtreme.MVC.Demos.Models.CardView.SimpleArray;
using DevExtreme.MVC.Demos.Models.CardView.Sorting;
using DevExtreme.MVC.Demos.Models.SampleData;

using System.Web.Mvc;

namespace DevExtreme.MVC.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;
}