• Material 3
  • Material 3 Dark
  • Fluent
  • Fluent Dark
  • Bootstrap v5
  • Bootstrap v5 Dark
  • Tailwind CSS
  • Tailwind CSS Dark
  • Material
  • Bootstrap v4
  • High Contrast
Theme Selection
Mode Selection
*Translated by Google Translator.

Example of Sorting Cards in ASP.NET MVC Kanban Control

This sample demonstrates the usage of sorting cards in the Kanban board. You can change the sort options in the dropdown list to reflect the card ordering on the board.

Sort By

The sample is designed to showcase the sorting behavior of the Kanban board. It contains the sortBy, field, and direction properties. The sortBy property provides the following options:

  • DataSourceOrder: Cards are aligned in the ascending or descending order based on the data source order and act accordingly when the user drag-and-drop the cards. Since the feature considers the default data source order, field mapping is not required to sort the cards.
  • Index: The cards are aligned based on the index value. The index binds to the card based on the mapping field that must be an integer value. Cards will be dropped at the particular position where the user drag-and-drop the cards. The index of the cards will dynamically update its field value based on the dropped position.
  • Custom: Users can map any field to sort the cards using this option, which accepts both string and integer field value. It maintains the initial mapping key-value to drag and drop the cards and does not change their mapping value after dropping the cards.

The direction property is used to align the cards either in the ascending or descending order on the Kanban board.

Transform your ASP.NET MVC web apps today with Syncfusion ASP.NET MVC components
85+ high-performance and responsive UI components
Dedicated support
Hassle-free licensing