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.
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.
@model IEnumerable<DevExtreme.MVC.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 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 ColumnReordering()
{
return View(ColumnReorderingSampleData.Orders);
}
}
}