Your search did not match any results.

Card View - Sorting

The DevExtreme CardView component can sort values against one or more fields. Use the sorting.mode property to specify sort mode.

Backend API
@model IEnumerable<DevExtreme.MVC.Demos.Models.CardView.Sorting.House> @(Html.DevExtreme().CardView() .ID("cardView") .DataSource(Model) .DataSource(Model, "ID") .CardsPerRow(Mode.Auto) .CardMinWidth(350) .WordWrapEnabled(true) .CardCover(cc => { cc .ImageExpr(new JS("cardCoverImageExpr")) .AltExpr(new JS("cardCoverAltExpr")); }) .Columns(c => { c.Add().DataField("Address"); c.Add() .DataField("Price") .Format(Format.Currency) .SortOrder(SortOrder.Asc); c.Add().DataField("HouseSize"); c.Add().DataField("Baths"); c.Add() .DataField("Beds") .SortOrder(SortOrder.Desc); }) .Sorting(s => s.Mode(GridSortingMode.Multiple)) ) <script> function cardCoverImageExpr({ ID }) { return `@Url.Content("~/Content/images/houses/")/${ ID }.jpg`; } function cardCoverAltExpr({ ID }) { return 'Photo of the house'; } </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 Sorting() { return View(SortingSampleData.Houses); } } }

  • Single sort mode
    A user can click a header panel item to sort by a given field and click it again to change sort order (ascending or descending). An arrow icon in the header panel item indicates sort order.

  • Multiple sort mode
    A user can hold the Shift key and click multiple header panel items to reorder cards. A number in the header panel item indicates the sort index.

To cancel field sort settings, hold the Ctrl key (Cmd on macOS) and click the appropriate header panel item.

You can also apply or cancel sort settings via the header panel item's context menu. To disable sort operations for a particular field, set the field's allowSorting property to false.

To specify initial sort settings, use the field's sortOrder and sortIndex properties. You can also use these properties to change sort settings at runtime.