SortableComponent
Represents the Kendo UI Sortable component for Angular.
Definition
Package:@progress/kendo-angular-sortable
Selector:kendo-sortable
Export Name:Accessible in templates as #kendoSortableInstance="kendoSortable"
Syntax:
<kendo-sortable [data]="['Item 1', 'Item 2', 'Item 3']"></kendo-sortable>Inputs
acceptZones
string[]
Defines the zones from which items can be transferred onto the current Sortable component
(see example). If the acceptZones property
of the target Sortable is set, you can transfer items between Sortables in different zones.
undefined
activeIndex
number
The index of the currently focused item.
If no item is focused, set to -1.
-1
activeItemClass
string | string[] | Set<string>
Defines the class which is applied to the active Sortable item.
null
activeItemStyle
{ [key: string]: string }
Defines the CSS styles which are applied to the currently dragged item (see example).
undefined
animation
boolean
Enables or disables built-in animations.
false
data
any[]
Sets an array of any data that is used as a data source for the Sortable.
disabledIndexes
number[]
Sets an array of integers that represent the indexes of the disabled items from the data array. See example.
[]
disabledItemClass
string | string[] | Set<string>
Defines the class which is applied to each disabled Sortable item.
null
disabledItemStyle
{ [key: string]: string }
Defines the CSS styles which are applied to all disabled items.
undefined
emptyItemClass
string | string[] | Set<string>
Defines the class which is applied to the empty item when the Sortable has empty data.
null
emptyItemStyle
{ [key: string]: string }
Defines the CSS styles applied to an empty item (see example).
undefined
emptyText
string
Sets the text message that will be displayed when the Sortable has no items.
"Empty"
itemClass
string | string[] | Set<string>
Defines the class which is applied to each Sortable item.
""
itemStyle
{ [key: string]: string }
Represents the CSS styles applied to each Sortable item.
{}
navigable
boolean
Sets a boolean value that determines whether the Sortable items are navigable using the keyboard. See example.
true
tabIndex
number
Specifies the tab index of the Sortable component.
null
trackBy
TrackByFunction<any>
Configures how the Sortable component tracks changes in its items collection.
zone
string
Sets a string that represents the name of the zone to which the Sortable belongs (see example). Items can be transferred between Sortables in the same zone.
undefined
Fields
dragIndex
number
The index of the currently dragged item.
-1
dragOverIndex
number
The index of the item above which the dragged item is.
-1
hideActiveItem
boolean
Gets or sets a boolean value that indicates whether the currently dragged item will be hidden.
If the currently dragged item is hidden, returns true.
If the currently dragged item is visible, returns false.
hintLocation
{ x: number; y: number }
The location of the hint indicator when dragging on mobile devices.
null
wrapper
HTMLElement
The SortableComponent's HTMLElement.
Events
Fires when a new item is added to the Sortable.
Fires while the moving an item from one position to another.
Fires when an item is removed from the Sortable.
dragEnd
EventEmitter<any>
Fires when the dragging of an item is completed.
dragLeave
EventEmitter<any>
Fires when dragging an item outside of the component.
dragOver
EventEmitter<any>
Fires while the dragging of an item is in progress.
dragStart
EventEmitter<any>
Fires when the dragging of an item is started.
navigate
EventEmitter<any>
Fires when navigating using the keyboard.
Methods
Inserts a new data item at a particular index in the Sortable component.
The data item.
indexnumberThe index at which the data item is inserted.
Clears the active item. An active item is the one that is currently focused when the user navigates with the keyboard.
Returns the currently active item when the user navigates with the keyboard.
any
- The data item which is currently active.
Moves a data item from one index to another in the Sortable component.
The data item's index.
toIndexnumberThe index which the data item should be moved to. Item currently sitting at that index is pushed back one position.
Removes the currently active item from the Data collection that the Sortable uses.