New to KendoReact? Start a free 30-day trial

SortableProps

Interface

Represents the props of the KendoReact Sortable component.

Definition

Package:@progress/kendo-react-sortable

Properties

animation?

boolean

Enables or disables the reorder animation of the Sortable items. defaults to true.

Default:

true

className?

string

Defines the CSS class which is applied to the Sortable element.

Example:

jsx

<Sortable className="custom-sortable" />

data

object[]

(Required) The data items of the Sortable.

Example:

jsx

<Sortable data={[{ id: 1, text: 'Item 1' }, { id: 2, text: 'Item 2' }]} />

disabledField?

string

The field which enables or disables an item.

Example:

jsx

<Sortable disabledField="isDisabled" />

emptyItemUI?

ComponentType<SortableEmptyItemUIProps>

The component that is rendered when no data is available.

idField

string

(Required) The field which uniquely identifies the Sortable items.

Example:

jsx

<Sortable idField="id" />

itemUI

ComponentType<SortableItemUIProps>

(Required) The Sortable items UI.

Example:

jsx

const ItemUI = (props) => <div>{props.dataItem.text}</div>;
<Sortable itemUI={ItemUI} />

navigatable?

boolean

If set to true, the user can use dedicated shortcuts to interact with the Sortable. By default, navigation is disabled.

Example:

jsx

<Sortable navigatable={true} />

boolean

Enables or disables the keyboard navigation. Defaults to true.

Default:

true

onDragEnd?

(event: SortableOnDragEndEvent) => void

Fires when the user stops dragging an item.

Parameters:eventSortableOnDragEndEvent

Example:

jsx

<Sortable onDragEnd={(event) => console.log(event)} />

onDragOver?

(event: SortableOnDragOverEvent) => void

Fires when the user is dragging an item over another Sortable item.

Parameters:eventSortableOnDragOverEvent

Example:

jsx

<Sortable onDragOver={(event) => console.log(event)} />

onDragStart?

(event: SortableOnDragStartEvent) => void

Fires when the user starts dragging an item. This event is preventable.

Parameters:eventSortableOnDragStartEvent

Example:

jsx

<Sortable onDragStart={(event) => console.log(event)} />

onNavigate?

(event: SortableOnNavigateEvent) => void

Fires when the user navigates within the Sortable by using the keyboard.

Parameters:eventSortableOnNavigateEvent

Example:

jsx

<Sortable onNavigate={(event) => console.log(event)} />

style?

CSSProperties

Defines the CSS styles which are applied to the Sortable element.

Example:

jsx

<Sortable style={{ border: '1px solid black' }} />

tabIndex?

number

Specifies the tab index of the Sortable items.

webMcp?

boolean | WebMcpProps

Enables Web MCP tool registration for this component. Requires a parent WebMcpProvider from @progress/kendo-react-webmcp.