All Components

Sortable Overview

The Sortable makes the elements within a list sortable through the drag-and-drop functionality.

Basic Usage

The following example demonstrates the Sortable in action.

import { SortableModule } from '@progress/kendo-angular-sortable';
@Component({
  selector: 'my-app',
  template: `
    <h5>Data: {{items | json}}</h5>
    <kendo-sortable
        [navigatable]="true"
        [data]="items"
        [itemClass] = "'k-button'"
        [itemStyle] = "{'margin':'5px', 'width': '40px'}"
        [activeItemClass] = "'k-button k-primary'">
    </kendo-sortable>      
  `
  })
  class AppComponent {
      public items: string[] = ['alpha', 'beta', 'gamma', 'delta', 'eta', 'theta'];
  }

Installation

  1. The Sortable package is published on the Progress NPM Registry. To set up your access, follow the steps in Installation.

  2. Download and install the package:

    npm install --save @progress/kendo-angular-sortable
  3. Once installed, import the SortableModule in your application root module:

    import { NgModule } from '@angular/core';
    import { BrowserModule } from '@angular/platform-browser';
    import { SortableModule } from '@progress/kendo-angular-sortable';
    import { AppComponent } from './app.component';
    
    @NgModule({
        bootstrap:    [AppComponent],
        declarations: [AppComponent],
        imports:      [BrowserModule, SortableModule]
    })
    export class AppModule {
    }

Dependencies

The Sortable package requires the following peer dependencies that have to be installed by your application:

  • @angular/common
  • @angular/core

Configuration

Disable Items

It is possible to disable items by using the disabledIndexes property.

@Component({
  selector: 'my-app',
  template: `
    <h5>Data: {{items | json}}</h5>
    <kendo-sortable
        [data]="items"
        [navigatable]="true"
        [disabledIndexes]="disabledIndexes"
        [itemClass] = "'k-button'"
        [activeItemClass] = "'k-button k-primary'"
        [disabledItemClass]="'k-button k-state-disabled'"
        [itemStyle] = "{'margin':'5px', 'width': '40px'}">
    </kendo-sortable>  
  `
})
class AppComponent {
  public disabledIndexes: number[] = [0, 1, 4, 5];
  public items: string[] = [];
  constructor() {
      for (let i = 0; i < 8; i++) {
          this.items[i] = "Item " + i;
      }
  }
}

Transfer Items between Sortables

The Sortable enables you to transfer items belonging to different Sortable components by using drag zones. To achieve this behavior, configure the zone and acceptZones properties.

@Component({
    selector: 'my-app',
    template: `
<h3>Drag items one-way:</h3>
<h5>Data1: {{palettes.Purples | json}}</h5>
<h5>Data2: {{palettes.Empty | json}}</h5>
<div [ngStyle]="{'height' : '200px'}">
    <div [ngStyle]="wrapStyle">
        <kendo-sortable [data]="palettes.Purples"
            [zone] = "'first'"
            [emptyText]="''"
            [itemClass] = "'k-button k-panelbar k-link'"
            [emptyItemClass] ="'empty'"
            [activeItemClass] = "'k-button k-state-active k-panelbar k-link'">
        </kendo-sortable>
    </div>
    <div [ngStyle]="wrapStyle">
        <kendo-sortable [data]="palettes.Empty"
            [zone] = "'second'"
            [acceptZones] = "['first']"
            [emptyText] = "'Drag here'"
            [itemClass] = "'k-button k-panelbar k-link'"
            [emptyItemStyle]= "{'min-height': '150px', width:'100%'}"
            [emptyItemClass] ="'empty'"
            [activeItemClass] = "'k-button k-state-active k-panelbar k-link'">
        </kendo-sortable>
    </div>
</div>
<h3>Drag between lists:</h3>
<h5>Data3: {{palettes.Greens | json}}</h5>
<h5>Data4: {{palettes.Reds | json}}</h5>
<div [ngStyle]="{'height' : '360px'}">
    <div [ngStyle]="wrapStyle">
        <kendo-sortable [data]="palettes.Greens"
            [zone] = "'twoWay'"
            [emptyText] = "'Drag here'"
            [itemClass] = "'k-button k-panelbar k-link'"
            [emptyItemStyle]= "{'min-height': '150px', width:'100%'}"
            [emptyItemClass] ="'empty'"
            [activeItemClass] = "'k-button k-state-active k-panelbar k-link'">
        </kendo-sortable>
    </div>
    <div [ngStyle]="wrapStyle">
        <kendo-sortable [data]="palettes.Reds"
            [zone] = "'twoWay'"
            [emptyText] = "'Drag here'"
            [itemClass] = "'k-button k-panelbar k-link'"
            [emptyItemStyle]= "{'min-height': '150px', width:'100%'}"
            [emptyItemClass] ="'empty'"
            [activeItemClass] = "'k-button k-state-active k-panelbar k-link'">
        </kendo-sortable>
    </div>
</div>
`
})
 class AppComponent {
    public palettes: any = this.palettes = {
        "Purples": ['Violet', 'Magenta', 'Purple', 'SlateBlue', 'Indigo'],
        "Empty": [],
        "Greens": ['LimeGreen', 'SeaGreen', 'Green', 'OliveDrab', 'DarkOliveGreen'],
        "Reds": ['LightSalmon', 'Salmon', 'IndianRed', 'FireBrick', 'DarkRed']
    };
    public wrapStyle: any = { 'border':'1px solid gray', 'margin': '20px' 'padding': '5px' , 'float': 'left', 'display': 'inline-block', 'width': '140px', 'min-height':'150px' };
}
In this article