SortableComponent

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.

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

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

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

Enables or disables the built-in animations.

Sets an array of integers, which represent the indexes of the disabled items from the data array (see example).

Defines the class which is applied to each disabled Sortable item.

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

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

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

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

Copy Codeimport { 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 { }

Defines the class which is applied to each Sortable item.

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

Copy Codeimport { 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 {
}

Enables or disables the keyboard navigation.

Specifies the tab index of the Sortable component.

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.