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

For more information, refer to the section on the
transfer of items.

activeIndex number

The index of the currently focused item.
Set to -1 if no item is focused.

activeItemClass string | string[] | Set

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 { Component, ViewEncapsulation } from '@angular/core';
import { SortableModule } from '@progress/kendo-angular-sortable';

@Component({
  selector: 'my-app',
  styles: [`
  `],
  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
      [data]="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 [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'}" >
                  <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);

disabledIndexes number[]

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

For more information, refer to the section on
disabled items.

disabledItemClass string | string[] | Set

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

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 { 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 applied to each Sortable item.

itemStyle {[key: string]: string}

Represents the CSS styles 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 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.

For more information, refer to the section on the
transfer of items.

Fields

dragIndex number

The index of the currently dragged item.

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.

hideActiveItem boolean

Sets a Boolean value that indicates whether the currently dragged item should be hidden.
Returns true if the currently dragged item is hidden.
Returns false if the currently dragged item is visible.

Events

dataAdd EventEmitter<DataEvent>

Fires when a new item is added to the SortableComponent.

dataRemove EventEmitter<DataEvent>

Fires when an item is removed from the SortableComponent.

dragEnd EventEmitter<DragDropEvent>

Fires when the dragging of an item is completed.

dragOver EventEmitter<DragOverEvent>

Fires while the dragging of an item is in progress.

dragStart EventEmitter<DragDropEvent>

Fires when the dragging of an item is started.

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