By default, the Kanban cards are initially placed and drop the card inside the columns based on JSON data orders.
Cards are placed in a particular position in the columns when you drop the cards by specifying the sortBy
property in sortSettings
, which is mapped from the datasource. This property allows the users to drop the cards in the Kanban board where exactly created on dropped clone. It is also helpful to render the cards based on the sortBy
property value.
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 following cases are dynamically changed their sortBy
value when drop the cards.
sortBy
value does not change.sortBy
value changed based on their previous card value.sortBy
value is changed if the cards have continuous order otherwise not changed their value.sortBy
value changed based on the previous card value.sortBy
value based on the previous card value.For Example,
Continuous Order -
Column A having Card A with field value 1
, Card B with field value 2
and Card C with field value 3
.
Column B having Card D with field value 5
. Dropped Card D between Card A and Card B. Now, Card D, B and C dynamically changed their field value to 2, 3, 4
.
Odd/Even order -
Column A having Card A with field value 1
, Card B with field value 3
and Card C with field value 5
.
Column B having Card D with field value 5
. Dropped Card D between Card A and Card B. Now, Card D, B and C dynamically changed their field value to 2, 3, 5
.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Kanban Priority</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="Kanban Priority" />
<meta name="author" content="Syncfusion" />
<link href="//cdn.syncfusion.com/ej2/ej2-base/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/ej2-buttons/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/ej2-inputs/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/ej2-dropdowns/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/ej2-layouts/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/ej2-navigations/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/ej2-popups/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/ej2-kanban/styles/material.css" rel="stylesheet" />
<script src="https://unpkg.com/core-js/client/shim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/core-js/2.4.1/core.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/zone.js/0.9.0/zone.min.js"></script>
<script src="https://unpkg.com/reflect-metadata@0.1.3"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
<script src="systemjs.config.js"></script>
<style>
#loader {
color: #008cff;
font-family: 'Helvetica Neue','calibiri';
font-size: 16px;
height: 40px;
left: 45%;
position: absolute;
top: 45%;
width: 30%;
}
</style>
</head>
<body>
<app-root>
<div id='loader'>LOADING....</div>
</app-root>
</body>
</html>