Card View - Column Reordering

DevExtreme CardView fields use the same display order as data fields in the component's dataSource. You can specify a different display order with the columns[] array. To reorder a field at runtime, change the columns[].visibleIndex property.

Backend API

@model IEnumerable<DevExtreme.NETCore.Demos.Models.CardView.ColumnReordering.Order> @(Html.DevExtreme().CardView() .ID("cardView") .DataSource(Model, "ID") .AllowColumnReordering(true) .CardsPerRow(Mode.Auto) .CardMinWidth(300) .Columns(c => { c.Add() .DataField("OrderNumber") .AllowReordering(false); c.Add().DataField("SaleAmount"); c.Add().DataField("Customer"); c.Add().DataField("Location"); c.Add() .DataField("OrderDate") .DataType(GridColumnDataType.Date); c.Add() .DataField("DeliveryDate") .DataType(GridColumnDataType.Date); }) )

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 ColumnReordering() { return View(ColumnReorderingSampleData.Orders); } } }

Users can drag and drop header items to reorder columns when allowColumnReordering is set to true. To disable reorder operations for a specific field, assign false to its allowReordering property. In this demo, allowReordering is disabled for the OrderNumber field.