SortableComponent
Represents the Kendo UI Sortable component for Angular.
Selector
kendo-sortable
Export Name
Accessible in templates as #kendoSortableInstance="kendoSortable"
Inputs
Name | Type | Default | Description |
---|---|---|---|
acceptZones |
|
Defines the zones from which items can be transferred onto the current Sortable component
(see example). If the | |
activeIndex |
|
The index of the currently focused item.
If no item is focused, set to | |
activeItemClass |
|
Defines the class which is applied to the active Sortable item. | |
activeItemStyle |
|
Defines the CSS styles which are applied to the currently dragged item (see example). | |
animation |
|
|
Enables or disables the built-in animations. |
data |
|
Sets an array of any data that is used as a data source for the Sortable. Change Theme Theme Loading ... | |
disabledIndexes |
|
Sets an array of integers, which represent the indexes of the disabled items from the data array (see example). | |
disabledItemClass |
|
Defines the class which is applied to each disabled Sortable item. | |
disabledItemStyle |
|
Defines the CSS styles which are applied to all disabled items. | |
emptyItemClass |
|
Defines the class which is applied to the empty item when the Sortable has empty data. | |
emptyItemStyle |
|
Defines the CSS styles applied to an empty item (see example). | |
emptyText |
|
Sets the text message that will be displayed when the Sortable has no items. ts
| |
itemClass |
|
Defines the class which is applied to each Sortable item. | |
itemStyle |
|
Represents the CSS styles which are applied to each Sortable item. ts
| |
navigable |
|
|
Enables or disables the keyboard navigation. |
tabIndex |
|
Specifies the tab index of the Sortable component. | |
zone |
|
Sets a string that represents the name of the zone to which the Sortable belongs (see example). Items can be transferred between Sortables which belong to the same zone. |
Fields
Name | Type | Default | Description |
---|---|---|---|
dragIndex |
|
The index of the currently dragged item. | |
dragOverIndex |
|
The index of the item above which the dragged item is. | |
hideActiveItem |
|
Gets or sets a Boolean value that indicates whether the currently dragged item will be hidden. If the currently dragged item is hidden, returns | |
hintLocation |
|
The location of the hint indicator when dragging on mobile devices. | |
wrapper |
|
The SortableComponent's HTMLElement. |
Events
Name | Type | Description |
---|---|---|
dataAdd |
|
Fires when a new item is added to the Sortable. |
dataMove |
|
Fires while the moving an item from one position to another. |
dataRemove |
|
Fires when an item is removed from the Sortable. |
dragEnd |
|
Fires when the dragging of an item is completed. |
dragLeave |
|
Fires when dragging an item outside of the component. |
dragOver |
|
Fires while the dragging of an item is in progress. |
dragStart |
|
Fires when the dragging of an item is started. |
navigate |
|
Fires when navigating using the keyboard. |
Methods
addDataItem | |||||||||
---|---|---|---|---|---|---|---|---|---|
Adds a new data item to a particular index. | |||||||||
|
clearActiveItem |
---|
Clears the active item. An active item is the item which becomes focused when the user navigates with the keyboard. |
getActiveItem | ||||
---|---|---|---|---|
Returns the currently active item when the user navigates with the keyboard. | ||||
|
moveItem | |||||||||
---|---|---|---|---|---|---|---|---|---|
Moves data item to a particular index. | |||||||||
|
removeDataItem | ||||||
---|---|---|---|---|---|---|
Removes the currently active item from the Data collection that the Sortable uses. | ||||||
|