Card View - Column Chooser

To change field visibility at runtime, set the columnChooser.enabled property to true. To ensure specific fields remain visible, set the columns[].allowHiding property to false. In this demo, allowHiding is disabled for "Full Name" and "Phone" columns.

Set columnChooser.mode to specify how users toggle column visibility:

"dragAndDrop"
Users drag & drop fields between the header panel and column chooser.
"select"
Users toggle check boxes for field names.

Backend API

@model IEnumerable<DevExtreme.MVC.Demos.Models.CardView.ColumnChooser.Employee> <div class="options"> <div class="caption">Options</div> <div class="options-container"> <div class="option"> <span>Column Chooser Mode:</span> @(Html.DevExtreme().SelectBox() .ID("column-chooser-mode") .DataSource(new object[] { "dragAndDrop", "select" }) .Value("select") .InputAttr("aria-label", "Column Chooser Mode") .OnValueChanged(@<text> function({ value }) { $('#card-view').dxCardView('instance').option('columnChooser.mode', value); $('#allow-select-all').dxCheckBox('instance').option('disabled', value !== 'select'); $('#select-by-click').dxCheckBox('instance').option('disabled', value !== 'select'); } </text>) ) </div> <div class="option"> @(Html.DevExtreme().CheckBox() .ID("search-enabled") .Text("Search Enabled") .Value(true) .OnValueChanged(@<text> function({ value }) { $('#card-view').dxCardView('instance').option('columnChooser.search.enabled', value); } </text>) ) </div> <div class="option"> @(Html.DevExtreme().CheckBox() .ID("allow-select-all") .Text("Allow Select All") .Value(true) .OnValueChanged(@<text> function({ value }) { $('#card-view').dxCardView('instance').option('columnChooser.selection.allowSelectAll', value); } </text>) ) </div> <div class="option"> @(Html.DevExtreme().CheckBox() .ID("select-by-click") .Text("Select By Click On Item") .Value(true) .OnValueChanged(@<text> function({ value }) { $('#card-view').dxCardView('instance').option('columnChooser.selection.selectByClick', value); } </text>) ) </div> <div class="option"> @(Html.DevExtreme().CheckBox() .ID("allow-column-reordering") .Text("Allow Column Reordering") .Value(false) .OnValueChanged(@<text> function({ value }) { $('#card-view').dxCardView('instance').option('allowColumnReordering', value); } </text>) ) </div> </div> </div> @(Html.DevExtreme().CardView() .ID("card-view") .DataSource(Model, "ID") .CardsPerRow(Mode.Auto) .CardMinWidth(300) .ColumnChooser(cc => { cc .Enabled(true) .Mode(GridColumnChooserMode.Select) .Height("340px") .Search(s => s.Enabled(true)) .Selection(s => { s .AllowSelectAll(true) .SelectByClick(true); }); }) .SearchPanel(sp => sp.Visible(true)) .CardCover(cc => { cc .ImageExpr(new JS("cardCoverImageExpr")) .AltExpr(new JS("cardCoverAltExpr")); }) .Columns(c => { c.Add() .Caption("Full Name") .CalculateFieldValue("calculateFullName") .AllowHiding(false); c.Add() .DataField("Birth_Date") .DataType(GridColumnDataType.Date); c.Add() .DataField("Hire_Date") .DataType(GridColumnDataType.Date); c.Add().DataField("Position"); c.Add().DataField("Department"); c.Add().DataField("State"); c.Add().DataField("City"); c.Add() .DataField("Phone") .AllowHiding(false); c.Add() .DataField("Email") .Visible(false); }) ) <script> function cardCoverImageExpr({ First_Name, Last_Name }) { return `@Url.Content("~/Content/images/employees/new")/${First_Name} ${Last_Name}.jpg`; } function cardCoverAltExpr({ First_Name, Last_Name }) { return `Photo of ${First_Name} ${Last_Name}`; } function calculateFullName(data) { return `${data.First_Name} ${data.Last_Name}`; } </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 ColumnChooser() { return View(ColumnChooserSampleData.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: 200px; display: inline-block; vertical-align: middle; } .option > span { margin-right: 10px; }

To display the CardView Column Chooser, click the column chooser icon in the CardView toolbar. You can specify the column chooser's position with the columnChooser.position property.

If the column chooser contains multiple hidden columns, assign true to the search.enabled property to enable DevExtreme’s field search UI.

In this demo, use the checkboxes above the CardView to toggle search and selection features.

To hide a field programmatically, change the columns[].visible property to false.