SortableProps

Premium

Represents the props of the KendoReact Sortable component.

Name	Type	Default	Description
animation?	boolean		Enables or disables the reorder animation of the Sortable items. defaults to true.
className?	string		Defines the CSS class which is applied to the Sortable element. jsx <Sortable className="custom-sortable" />
data	object[]		(Required) The data items of the Sortable. jsx <Sortable data={[{ id: 1, text: 'Item 1' }, { id: 2, text: 'Item 2' }]} />
disabledField?	string		The field which enables or disables an item. jsx <Sortable disabledField="isDisabled" />
emptyItemUI?	React.ComponentType<SortableEmptyItemUIProps>		The component that is rendered when no data is available.
idField	string		(Required) The field which uniquely identifies the Sortable items. jsx <Sortable idField="id" />
itemUI	React.ComponentType<SortableItemUIProps>		(Required) The Sortable items UI. 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. jsx <Sortable navigatable={true} />
navigation?	boolean		Enables or disables the keyboard navigation. Defaults to true.
onDragEnd?	(event: SortableOnDragEndEvent) => void		Fires when the user stops dragging an item. jsx <Sortable onDragEnd={(event) => console.log(event)} />
onDragOver?	(event: SortableOnDragOverEvent) => void		Fires when the user is dragging an item over another Sortable item. jsx <Sortable onDragOver={(event) => console.log(event)} />
onDragStart?	(event: SortableOnDragStartEvent) => void		Fires when the user starts dragging an item. This event is preventable. jsx <Sortable onDragStart={(event) => console.log(event)} />
onNavigate?	(event: SortableOnNavigateEvent) => void		Fires when the user navigates within the Sortable by using the keyboard. jsx <Sortable onNavigate={(event) => console.log(event)} />
style?	React.CSSProperties		Defines the CSS styles which are applied to the Sortable element. jsx <Sortable style={{ border: '1px solid black' }} />
tabIndex?	number		Specifies the tab index of the Sortable items.