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. Allows you to transfer items between Sortables, which belong to different zones, if the acceptZones property of the target Sortable is set.

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.

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

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

The dataAdd event is fired when a new item is added to the SortableComponent.

dataRemove EventEmitter

The dataRemove event is fired when an item is removed from the SortableComponent.

dragEnd EventEmitter

The dragEnd event is fired 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

The dragOver event is fired 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

The dragStart event is fired 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 a focused item when the keyboard navigation is used.

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 Sortable uses.

In this article