Items

You can disable and provide an item or an empty item component when you render the items of the Sortable component.

Disabling Items

To disable the items of the Sortable, define its disabledField property.

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', disabled: true },
            { id: 4, text: 'item4' },
            { id: 5, text: 'item5', disabled: true },
            { 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')
);

Using the Item Component

The component that you pass to itemUI receives SortableItemUIProps as its properties. When you implement the item component, pass the following props to the first element child:

const SortableItemUI = (props) => {
    const { style, attributes, forwardRef, dataItem } = props;

    return (
        <div
            {...attributes}
            ref={forwardRef}
            style={{
                ...style
            }}
        >
            {dataItem.text}
        </div>
    );
};

Using the Empty Item Component

The component that you pass to emptyItemUI receives SortableEmptyItemUIProps as its properties. The empty item component will be rendered when the data of the Sortable is empty.

const SortableEmptyItemUI = (props: SortableEmptyItemUIProps) => {
    const { message } = props;

    return (<div>{message}</div>);
};
 /