All Components

SortableComponent

Represents the Kendo UI Sortable component for Angular.

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

@Component({
 selector: 'my-app',
 template: `
     <kendo-sortable
         [data]="items"
         [itemStyle] = "demoItemStyle"
         [activeItemStyle] = "activeStyle">
     </kendo-sortable>
 `
 })
 class AppComponent {
     public items: string[] = ['alpha', 'beta', 'gamma', 'delta', 'eta', 'theta'];

     public activeStyle: any = {
         'background-color': '#C5E1A5', 'display': 'inline-block',
         'width': '60px', 'height': '40px', 'cursor': 'move', 'margin': '2px', 'padding': '5px',
         'border': '2px dashed black'
     };
     public demoItemStyle: any = {
         'background-color': '#C5CAE9', 'display': 'inline-block',
         'width': '60px', 'height': '40px', 'cursor': 'move', 'margin': '2px', 'padding': '5px'
     };
 }

Selector

kendo-sortable

Inputs

acceptZones string[]

Defines the zones from which items can be transferred onto the current Sortable component.
If the acceptZones property of the target Sortable is set, allows you to transfer items between Sortables
which belong to different zones.

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

@Component({
 selector: 'my-app',
 template: `
   <kendo-sortable [data]="['Item 1', 'Item 2', 'Item 3']" [zone]="'zone1'">
   </kendo-sortable>
   <br/>
   <kendo-sortable [data]="[]" [zone]="'zone2'" [acceptZones]="['zone1']">
   </kendo-sortable>
   `
})
class AppComponent {
}

activeItemClass string | string[] | Set<string>

Defines the Class applied to the active Sortable item.

activeItemStyle {[key: string]}: string}

Defines the CSS styles applied to the currently dragged item.

animation boolean

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

data any[]

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

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

@Component({
    selector: 'my-app',
    template: `
<p>*Reorder the palettes</p>
<p>*Reorder the colors in palettes</p>
<p>*Move colors between palettes</p>
<div>
<kendo-sortable [data] = "palettes"
[itemStyle] = "{'float':'left', 'display': 'inline-block', 'width': '125px', 'color': item,
'background-color': '#fffaed', 'margin': '4px' , 'border': '1px solid black', 'cursor': 'move'}" >
    <template let-palette="item">
    {{palette.name}}
    <br/><br/>
    <div [ngStyle]="{'width' : '120px'}">
        <kendo-sortable [data]="palette.data"
        [zone] = "'innerZone'"
        [itemStyle] = "{'border': '0px', 'opacity':'1', 'cursor': 'move'}"
        [emptyItemStyle] = "{'height': '30px', 'border': '2px dashed black'}"
        [activeItemStyle] = "{'border': '2px dashed black', 'opacity':'0.7'}" >
            <template let-item="item">
                <div [ngStyle]="{'background-color': item,'color': 'white',
                'height': '30px', 'margin' : '2px', 'border': '1px solid black'}" >
                    {{item}}
                </div>
            </template>
        </kendo-sortable>
    </div>
    </template>
</kendo-sortable>
</div>
`
})
class AppComponent {

    public colorsA: Array<string> = ['Violet', 'Magenta', 'Purple', 'SlateBlue'];
    public colorsB: Array<string> = ['SteelBlue', 'CornflowerBlue', 'RoyalBlue', 'MediumBlue'];
    public colorsC: Array<string> = ['LimeGreen', 'SeaGreen', 'Green', 'OliveDrab'];
    public colorsD: Array<string> = ['LightSalmon', 'Salmon', 'IndianRed', 'FireBrick'];

    public palettes: Array<any> = null;

    constructor() {
        this.palettes = [{ data: this.colorsA, name: "Palette A" },
            { data: this.colorsB, name: "Palette B" },
            { data: this.colorsC, name: "Palette C" },
            { data: this.colorsD, name: "Palette D" }
        ];
    }
}

disabledIndexes number[]

Sets an array of integers that represent the indexes of the disabled items from the data array.

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

@Component({
 selector: 'my-app',
 template: `
 <kendo-sortable
     [data]="items"
     [disabledIndexes]="[0, 1, 2, 5]"

     [itemStyle] = "demoItemStyle"
     [disabledItemStyle]="demoDisabledItemStyle"
     [activeItemStyle] = "demoActiveItemStyle"
     >
 </kendo-sortable>
   `
})
class AppComponent {
 public items: string[] = [];

 public demoItemStyle: any =
{ 'background-color': '#7986cb', 'cursor': 'move', 'margin': '2px', 'height': '20px', 'width': '100px' };
 public demoDisabledItemStyle: any =
{ 'background-color': '#e57373', 'cursor': 'not-allowed', 'margin': '2px', 'height': '20px', 'width': '100px' };
 public demoActiveItemStyle: any =
{ 'border': '2px dashed black' };

 constructor() {
   for (let i = 0; i < 10; i++) {
     this.items[i] = "Item " + i.toString();
   }
 }
}

disabledItemClass string | string[] | Set<string>

Defines the Class applied to each Disabled Sortable item.

disabledItemStyle {[key: string]}: string}

Defines the CSS styles applied to all disabled items.

emptyItemClass string | string[] | Set<string>

Defines the Class applied to the Empty item, when the Sortable has empty Data.

emptyItemStyle {[key: string]}: string}

Defines the CSS styles applied to an empty item.

emptyText string

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

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>
   `
})
class AppComponent { }

itemClass string | string[] | Set<string>

Defines the Class applied to each Sortable item.

itemStyle {[key: string]}: string}

Represents the CSS styles applied to each Sortable item.

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>
   `
})
class AppComponent {
}

navigatable boolean

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

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

@Component({
  selector: 'my-app',
  template: `
  <ul [ngStyle]="{'list-style-type': 'none', 'margin':'30px 48px'}">
     <kendo-sortable [data]="items" [navigatable] = "true" [itemStyle] = "demoItemStyle" [activeItemStyle] = "demoActiveItemStyle">
     </kendo-sortable>
  </ul>
  `
 })
class AppComponent {
 public items: string[] = [];

 public demoItemStyle: any =
{ 'background-color': '#7986cb', 'cursor': 'move', 'margin': '2px', 'height': '20px', 'width': '100px' };
 public demoActiveItemStyle: any =
{ 'border': '2px dashed black' };

 constructor() {
   for (let i = 0; i < 10; i++) {
     this.items[i] = "Item " + i.toString();
   }
 }
}

tabIndex number

Specifies the TabIndex for the SortableComponent.

zone string

Sets a string that represents the name of the zone to which the Sortable belongs.
Items can be transferred between Sortables that belong to the same zone.

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

@Component({
 selector: 'my-app',
 template: `
   <kendo-sortable [data]="['Item A 1', 'Item A 2', 'Item A 3']" [zone]="'example'">
   </kendo-sortable>
   <br/>
   <kendo-sortable [data]="['Item B 1', 'Item B 2', 'Item B 3']" [zone]="'example'">
   </kendo-sortable>
   `
})
class AppComponent {
}

Events

dataAdd EventEmitter

Fires when a new item is added to the SortableComponent.

dataRemove EventEmitter

Fires when an item is removed from the SortableComponent.

dragEnd EventEmitter

Fires when the dragging of an item is completed.

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

@Component({
 selector: 'my-app',
 template: `
   <kendo-sortable [data]="items" [itemStyle] = "demoItemStyle" [activeItemStyle] = "demoActiveItemStyle"
     (dragEnd) = "dragEndHandler()" (dragStart) = "dragStartHandler()">
   </kendo-sortable>
   <br/>
   <div [innerHTML]="eventInfo"></div>
   `
})
class AppComponent {
public items: Array<string> = ['Item 1', 'Item 2', 'Item 3', 'Item 4'];
public demoItemStyle: any =
{ 'background-color': '#7986cb', 'cursor': 'move', 'margin': '2px', 'height': '20px', 'width': '100px' };
public demoActiveItemStyle: any = { 'border': '2px dashed black' };
public dragStartHandler(): void {
  this.eventInfo = "";
}
public dragEndHandler(): void {
  this.eventInfo = "Drag End fired";
}

dragOver EventEmitter

Fires while the dragging of an item is in progress.

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

@Component({
 selector: 'my-app',
 template: `
   <kendo-sortable [data]="items" [itemStyle] = "demoItemStyle" [activeItemStyle] = "demoActiveItemStyle"
     (dragOver) = "dragOverHandler($event)" (dragStart) = "dragStartHandler()">
   </kendo-sortable>
   <br/>
   <div [innerHTML]="eventInfo"></div>
   `
})
class AppComponent {
public items: Array<string> = ['Item 1', 'Item 2', 'Item 3', 'Item 4'];
public demoItemStyle: any =
{ 'background-color': '#7986cb', 'cursor': 'move', 'margin': '2px', 'height': '20px', 'width': '100px' };
public demoActiveItemStyle: any = { 'border': '2px dashed black' };
public dragStartHandler(): void {
  this.eventInfo = "";

}
public dragOverHandler(eventData): void {
  this.eventInfo = "Dragging over " + this.items[eventData.newIndex];
}

dragStart EventEmitter

Fires when the dragging of an item is started.

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

@Component({
 selector: 'my-app',
 template: `
   <kendo-sortable [data]="items" [itemStyle] = "demoItemStyle" [activeItemStyle] = "demoActiveItemStyle"
     (dragStart) = "dragStartHandler($event)">
   </kendo-sortable>
   <br/>
   <div [innerHTML]="eventInfo"></div>
   `
})
class AppComponent {
public items: Array<string> = ['Item 1', 'Item 2', 'Item 3', 'Item 4'];
public demoItemStyle: any =
{ 'background-color': '#7986cb', 'cursor': 'move', 'margin': '2px', 'height': '20px', 'width': '100px' };
public demoActiveItemStyle: any = { 'border': '2px dashed black' };
public dragStartHandler(eventData: DragDropEvent): void {
  this.eventInfo = "Drag Start fired for " + this.items[eventData.index];
  this.dragStartString = this.eventInfo + "<br>";
  }
}

Methods

addDataItem

Adds a new dataItem to a particular index.

Parameters

dataItem any

The dataItem.

index number

The index at which the DataItem is inserted.

clearActiveItem

Clears the active item. An active item is an item that gets focused when navigating with the keyboard.

getActiveItem

Returns the currently active item when navigating with the keyboard.

Returns

any The DataItem that is currently active

removeActiveItem

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

In this article