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

Accessibility

06 Jun 2023 / 2 minutes to read

Keyboard interaction

All the Kanban actions can be controlled by keyboard keys using the allowKeyboard property, which is set to true by default. The following are the standard keys that work on Kanban:

Keys Description
Alt + j Focuses the Kanban element [provided from application end].
Home Moves the selection to the first card of Kanban.
End Moves the selection to the last card of Kanban.
Left or Right Arrow or Page Up or Page Down Moves the selection to the previous, next, top, or bottom cards in the Kanban board on pressing any of these keys.
Ctrl + Up Arrow Collapses all the swimlane rows.
Ctrl + Down Arrow Expands all the swimlane rows.
Ctrl + Left Arrow Collapses the selected card column.
Ctrl + Right Arrow Expands the selected card column.
Alt + Up Arrow Collapses the selected card swimlane row.
Alt + Down Arrow Expands the selected card swimlane row.
Shift + Up Arrow Selects the multiple cards on top direction. [Selects multiple cards within the swimlanes]
Shift + Down Arrow Selects the multiple cards on bottom direction. [Selects multiple cards within the swimlanes]
Shift + Left Arrow Selects the multiple cards on left direction. [Selects multiple cards within the swimlanes]
Shift + Right Arrow Selects the multiple cards on right direction. [Selects multiple cards within the swimlanes]

Disable keyboard interaction

Disables all the functionalities in the Kanban board performed using keyboard by setting the allowKeyboard properties to false.

Source
Preview
index.js
index.html
Copied to clipboard
var kanbanObj = new ej.kanban.Kanban({
    dataSource: kanbanData,
    keyField: 'Status',
    allowKeyboard: false,
    columns: [
        { headerText: 'Backlog', keyField: 'Open', allowToggle: true },
        { headerText: 'In Progress', keyField: 'InProgress', allowToggle: true },
        { headerText: 'Testing', keyField: 'Testing', allowToggle: true },
        { headerText: 'Done', keyField: 'Close', allowToggle: true }
    ],
    cardSettings: {
        contentField: 'Summary',
        headerField: 'Id'
    },
    swimlaneSettings: {
        keyField: 'Assignee'
    }
});
kanbanObj.appendTo('#Kanban');
Copied to clipboard
<!DOCTYPE html><html lang="en"><head>
            
    <title>Disable Keyboard Functionalities</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="Disable Kanban keyboard functionalities">
    <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