Keyboard Navigation

The keyboard navigation of the Sortable is always available.

To disable it, use the navigation property of the component.

The Sortable supports the following keyboard shortcuts:

SHORTCUTDESCRIPTION
Right Arrow & Down ArrowSets the focus to the next available item.
Left Arrow & Up ArrowSets the focus to the previously available item.
  • Ctrl+Right Arrow
  • Ctrl+Down Arrow
  • +Right Arrow
  • +Down Arrow
Moves the focused item after the next item.
  • Ctrl+Left Arrow
  • Ctrl+Up Arrow
  • +Left Arrow
  • +Up Arrow
Moves the focused item before the previous item.
import React from 'react';
import ReactDOM from 'react-dom';
import { Sortable } from '@progress/kendo-react-sortable';

const getBaseItemStyle = (isActive) => ({
    height: 70,
    lineHeight: '68px',
    fontSize: '16px',
    textAlign: 'center',
    outline: 'none',
    border: '1px solid',
    cursor: 'move',
    display: 'inline-block',
    background: isActive ? '#27aceb' : '#bfe7f9',
    color: isActive ? '#fff' : '#1494d0',
    borderColor: isActive ? '#27aceb' : '#fff'
});

const SortableItemUI = (props) => {
    const { isDisabled, isActive, style, attributes, dataItem, forwardRef } = props;
    const classNames = [ 'col-xs-6 col-sm-3' ];

    if (isDisabled) {
        classNames.push('k-state-disabled');
    }

    return (
        <div
            ref={forwardRef}
            {...attributes}
            style={{
                ...getBaseItemStyle(isActive),
                ...style
            }}
            className={classNames.join(' ')}
        >
            {dataItem.text}
        </div>
    );
};

class App extends React.Component {
    state = {
        data: [
            { id: 1, text: 'item1' },
            { id: 2, text: 'item2' },
            { id: 3, text: 'item3' },
            { id: 4, text: 'item4' },
            { id: 5, text: 'item5' },
            { id: 6, text: 'item6' },
            { id: 7, text: 'item7' },
            { id: 8, text: 'item8' }
        ]
    };

    onDragOver = (event) => {
        this.setState({
            data: event.newState
        });
    }

    onNavigate = (event) => {
        this.setState({
            data: event.newState
        });
    }

    render() {
        return (
            <div className="container-fluid">
                <div className="example-config">
                    <h6>Items: {JSON.stringify(this.state.data)}</h6>
                </div>
                <Sortable
                    idField={'id'}
                    disabledField={'disabled'}
                    data={this.state.data}

                    itemUI={SortableItemUI}

                    onDragOver={this.onDragOver}
                    onNavigate={this.onNavigate}
                />
            </div>
        );
    }
}

ReactDOM.render(
    <App />,
    document.querySelector('my-app')
);
In this article
 /