SortableComponent

Represents the Kendo UI Sortable component for Angular.

Example
View Source
Edit In Stackblitz  
Change Theme:

Selector

kendo-sortable

Export Name

Accessible in templates as #kendoSortableInstance="kendoSortable"

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, allows you to transfer items between Sortables which belong to different zones.

activeIndex

number

The index of the currently focused item. If no item is focused, set to -1.

activeItemClass

string | string[] | Set<string>

Defines the class which is applied to the active Sortable item.

activeItemStyle

{[key: string]: string}

Defines the CSS styles which are applied to the currently dragged item (see example).

animation

boolean

Enables or disables the built-in animations. The default value is false.

disabledIndexes

number[]

Sets an array of integers, which 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.

disabledItemStyle

{[key: string]: string}

Defines the CSS styles which are applied to all disabled items.

emptyItemClass

string | string[] | Set<string>

Defines the class which is applied to the empty item when the Sortable has empty data.

emptyItemStyle

{[key: string]: string}

Defines the CSS styles applied to an empty item (see example).

emptyText

string

Sets the text message that will be displayed when the Sortable has no items.

import { Component } from '@angular/core';
import { SortableModule } from '@progress/kendo-angular-sortable';

@Component({
 selector: 'my-app',
 template: `
   <kendo-sortable [data]="[]"
     [emptyText]="'No items - custom message and styles'"
     [emptyItemStyle] = "{'height': '40px', 'width':'400px', 'border': '2px dashed black'}" >
   </kendo-sortable>
   `
})
export class AppComponent { }

itemClass

string | string[] | Set<string>

Defines the class which is applied to each Sortable item.

itemStyle

{[key: string]: string}

Represents the CSS styles which are applied to each Sortable item.

import { Component } from '@angular/core';
import { SortableModule } from '@progress/kendo-angular-sortable';

@Component({
 selector: 'my-app',
 template: `
  <kendo-sortable
     [data]="['1','2','3','4','5','6','7']"
     [itemStyle] ="{
         'display': 'inline-block',
         'background-color': '#51A0ED',
         'height':'50px',
         'width':'50px',
         'margin':'3px',
         'cursor':'move'
         }"
     >
  </kendo-sortable>
   `
})
export class AppComponent {
}

navigable

boolean

Enables or disables the keyboard navigation. The default value is false.

tabIndex

number

Specifies the tab index of the Sortable component.

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 which belong to the same zone.

data

Array<any>

Sets an array of any data that is used as a data source for the Sortable.

Fields

dragIndex

number

The index of the currently dragged item.

dragOverIndex

number

The index of the item above which the dragged item is.

hintLocation

{ x: number; y: number; }

The location of the hint indicator when dragging on mobile devices.

wrapper

HTMLElement

The SortableComponent's HTMLElement.

hideActiveItem

boolean

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.

Events

dataAdd

EventEmitter<DataAddEvent>

Fires when a new item is added to the Sortable.

dataMove

EventEmitter<DataMoveEvent>

Fires while the moving an item from one position to another.

dataRemove

EventEmitter<DataRemoveEvent>

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

addDataItem

Adds a new data item to a particular index.

Parameters

dataItem

any

The data item.

index

number

The index at which the data item is inserted.

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.

Returns

any

  • The data item which is currently active.

moveItem

Moves data item to a particular index.

Parameters

fromIndex

number

The data item's index.

toIndex

number

The index which the data item should be moved to. Item currently sitting at that index is pushed back one position.

removeDataItem

Removes the currently active item from the Data collection that the Sortable uses.

Parameters

index

number