JavaScript (ES5)
EditEdit This Document
Demos
Support
Forum
Upgrade Guide
FREE TRIAL
Search results

Card Order

06 Jun 2023 / 3 minutes to read

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 priority property, 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 priority property value.

The following cases are dynamically changed their priority value when drop the cards.

  • If the cell has no cards, the dropped card priority value does not change.
  • If the cell has one card and dropped a card to last position or previous/next cards that do not have continuous order, then the dropped card priority value changed based on their previous card value.
  • If the cell has one card and dropped a card on previous position, then compare both values and the dropped card priority value is changed if the cards have continuous order otherwise not changed their value.
  • When the previous and next cards does not have continuous order, the dropped card priority value changed based on the previous card value.
  • When previous and next cards have continuous order or odd/even value, then the dropped card followed by next all cards up to continuous value are dynamically changed their priority value based on the previous card value.

For Example, Continuous Order - Column A having Card A with priority value 1, Card B with priority value 2 and Card C with priority value 3. Column B having Card D with priority value 5. Dropped Card D between Card A and Card B. Now, Card D, B and C dynamically changed their priority value to 2, 3, 4.

Odd/Even order - Column A having Card A with priority value 1, Card B with priority value 3 and Card C with priority value 5. Column B having Card D with priority value 5. Dropped Card D between Card A and Card B. Now, Card D, B and C dynamically changed their priority value to 2, 3, 5.

The priority property mapping key value must be number format.

Source
Preview
index.js
index.html
Copied to clipboard
var kanbanObj = new ej.kanban.Kanban({
    dataSource: kanbanData,
    keyField: 'Status',
    columns: [
        { headerText: 'Backlog', keyField: 'Open' },
        { headerText: 'In Progress', keyField: 'InProgress' },
        { headerText: 'Testing', keyField: 'Testing' },
        { headerText: 'Done', keyField: 'Close' }
    ],
    cardSettings: {
        contentField: 'Summary',
        headerField: 'Id',
        priority: 'RankId'
    }
});
kanbanObj.appendTo('#Kanban');
Copied to clipboard
<!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="index.css" rel="stylesheet">
    <link href="//cdn.syncfusion.com/ej2/21.2.3/ej2-base/styles/material.css" rel="stylesheet">
    <link href="//cdn.syncfusion.com/ej2/21.2.3/ej2-buttons/styles/material.css" rel="stylesheet">
    <link href="//cdn.syncfusion.com/ej2/21.2.3/ej2-inputs/styles/material.css" rel="stylesheet">
    <link href="//cdn.syncfusion.com/ej2/21.2.3/ej2-dropdowns/styles/material.css" rel="stylesheet">
    <link href="//cdn.syncfusion.com/ej2/21.2.3/ej2-layouts/styles/material.css" rel="stylesheet">
    <link href="//cdn.syncfusion.com/ej2/21.2.3/ej2-navigations/styles/material.css" rel="stylesheet">
    <link href="//cdn.syncfusion.com/ej2/21.2.3/ej2-popups/styles/material.css" rel="stylesheet">
    <link href="//cdn.syncfusion.com/ej2/21.2.3/ej2-kanban/styles/material.css" rel="stylesheet">
    
    
<script src="https://cdn.syncfusion.com/ej2/21.2.3/dist/ej2.min.js" type="text/javascript"></script>
<script src="es5-datasource.js" type="text/javascript"></script>
</head>

<body>
    
    <div id="container">
        <div class="content-wrapper">
            <div id="Kanban"></div>
        </div>
    </div>


<script>
var ele = document.getElementById('container');
if(ele) {
    ele.style.visibility = "visible";
 }   
        </script>
<script src="index.js" type="text/javascript"></script>
</body></html>
Previous
Next