All Components

SortableComponent

Represents the Kendo UI Sortable component for Angular.

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

@Component({
  selector: 'my-app',
  styles: [`
    .item {
      background-color: #C5CAE9;
      display: inline-block;
      width: 60px;
      height: 40px;
      cursor: move;
      margin: 2px;
      padding: 5px;
    }

    .active {
      background-color: #C5E1A5;
      display: inline-block;
      width: 60px;
      height: 40px;
      cursor: move;
      margin: 2px;
      padding: 5px;
      border: 2px dashed black;
    }
  `],
  encapsulation: ViewEncapsulation.None,
  template: `
    <kendo-sortable
      [data]="items"
      itemClass="item"
      activeItemClass="active">
    </kendo-sortable>
  `
})
export class AppComponent {
  public items: string[] = ['alpha', 'beta', 'gamma', 'delta', 'eta', 'theta'];
}
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { SortableModule } from '@progress/kendo-angular-sortable';
import { AppComponent } from './app.component';

@NgModule({
    bootstrap:    [AppComponent],
    declarations: [AppComponent],
    imports:      [BrowserModule, BrowserAnimationsModule, SortableModule]
})
export class AppModule {}

import { AppModule } from './app.module';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';

const platform = platformBrowserDynamic();
platform.bootstrapModule(AppModule);

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

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

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

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

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

navigatable 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

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

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

@Component({
    selector: 'my-app',
    encapsulation: ViewEncapsulation.None,
    template: `
    <ul>
      <li>Reorder the palettes</li>
      <li>Reorder the colors in palettes</li>
      <li>Move colors between palettes</li>
    </ul>
    <kendo-sortable
      [kendoSortableBinding]="palettes"
      [itemStyle]="{'float':'left', 'display': 'inline-block', 'width': '125px', 'color': item,
                    'background-color': '#fffaed', 'margin': '4px' , 'border': '1px solid black', 'cursor': 'move'}">
        <ng-template let-palette="item">
          {{palette.name}}
          <br/><br/>
          <div style="width: 120px;">
              <kendo-sortable
              [kendoSortableBinding]="palette.data"
              [itemStyle] = "{'border': '0px', 'opacity':'1', 'cursor': 'move'}"
              [emptyItemStyle] = "{'height': '30px', 'border': '2px dashed black'}"
              [activeItemStyle] = "{'border': '2px dashed black', 'opacity':'0.7'}"
              zone="innerZone">
                  <ng-template let-item="item">
                      <div [ngStyle]="{'background-color': item,'color': 'white',
                      'height': '30px', 'margin' : '2px', 'border': '1px solid black'}" >
                          {{item}}
                      </div>
                  </ng-template>
              </kendo-sortable>
           </div>
        </ng-template>
    </kendo-sortable>
    `
})
export class AppComponent {
    public colorsA: string[] = ['Violet', 'Magenta', 'Purple', 'SlateBlue'];
    public colorsB: string[] = ['SteelBlue', 'CornflowerBlue', 'RoyalBlue', 'MediumBlue'];
    public colorsC: string[] = ['LimeGreen', 'SeaGreen', 'Green', 'OliveDrab'];
    public colorsD: string[] = ['LightSalmon', 'Salmon', 'IndianRed', 'FireBrick'];

    public palettes: any[] = [
        { data: this.colorsA, name: 'Palette A' },
        { data: this.colorsB, name: 'Palette B' },
        { data: this.colorsC, name: 'Palette C' },
        { data: this.colorsD, name: 'Palette D' }
    ];
}

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { SortableModule } from '@progress/kendo-angular-sortable';
import { AppComponent } from './app.component';

@NgModule({
    bootstrap:    [AppComponent],
    declarations: [AppComponent],
    imports:      [BrowserModule, BrowserAnimationsModule, SortableModule]
})
export class AppModule {}

import { AppModule } from './app.module';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';

const platform = platformBrowserDynamic();
platform.bootstrapModule(AppModule);

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.

itemTemplateRef TemplateRef

Defines the template that will be used for rendering the items.

placeholderTemplateRef TemplateRef

Defines the template that will be used for rendering the placeholder.

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

Fires when the dragging of an item is completed.

dragLeave EventEmitter

Fires when dragging an item outside of the component.

dragOver EventEmitter

Fires while the dragging of an item is in progress.

dragStart EventEmitter

Fires when the dragging of an item is started.

navigate EventEmitter

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
In this article