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

@Component({
  selector: 'my-app',
  template: `
    <div class="example-config">
        <h5>Items: {{items | json}}</h5>
    </div>
    <div class="container-fluid">
        <div class="row">
            <kendo-sortable
                [navigatable]="true"
                [animation] = "true"
                [data]="items"
                [itemClass] = "'item col-xs-6 col-sm-3'"
                [activeItemClass] = "'item col-xs-6 col-sm-3 active'"
            >
            </kendo-sortable>
        </div>
    </div>
  `,
  styleUrls: ['examples/styles.component.css'],
  encapsulation: ViewEncapsulation.None
  })
  class AppComponent {
      public items: string[] = ['Item 1', 'Item 2', 'Item 3', 'Item 4', 'Item 5', 'Item 6', 'Item 7', 'Item 8'];
  }

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

Features

The Sortable delivers the following features:

Disabled Items

You can disable items by using the disabledIndexes property.

import {Component, ViewEncapsulation} from '@angular/core';

@Component({
  selector: 'my-app',
  template: `
    <div class="example-config">
        <h5>Items: {{items | json}}</h5>
        <h5>Disabled items: {{disabledIndexes}}</h5>
    </div>
    <div class="container-fluid">
        <div class="row">
            <kendo-sortable
                [data]="items"
                [navigatable]="true"
                [animation] = "true"
                [disabledIndexes]="disabledIndexes"
                [itemClass] = "'item col-xs-6 col-sm-3'"
                [activeItemClass] = "'item col-xs-6 col-sm-3 active'"
                [disabledItemClass]="'item col-xs-6 col-sm-3 disabled'"
            >
            </kendo-sortable>
        </div>
    </div>
  `,
  styleUrls: ['examples/styles.component.css'],
  encapsulation: ViewEncapsulation.None
})
class AppComponent {
  public disabledIndexes: number[] = [0, 2, 5, 7];
  public items: string[] = [];
  constructor() {
      for (let i = 0; i < 8; i++) {
          this.items[i] = "Item " + i;
      }
  }
}

Shifting of Items

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

You can transfer items by dragging them:

Drag One-Way

While you can drag any item from the first list to the second one when dragging items between Sortables one-way, you cannot drag items from the second list back to the first one.

The following example demonstrates how to enable the dragging of items within the same items list.

import {Component, ViewEncapsulation} from '@angular/core';

@Component({
    selector: 'my-app',
    template: `
    <div class="example-config">
        <h5>Team A: {{palettes.TeamA | json}}</h5>
        <h5>Team B: {{palettes.TeamB | json}}</h5>
    </div>
    <div class="container-fluid">
        <div class="row">
            <div class="col-xs-12 col-sm-6 team">
                <p>Team A</p>
                <kendo-sortable [data]="palettes.TeamA"
                    [zone] = "'first'"
                    [emptyText]="''"
                    [itemClass] = "'employee'"
                    [emptyItemClass] ="'empty'"
                    [activeItemClass] = "'employee active'">
                </kendo-sortable>
            </div>
            <div class="col-xs-12 col-sm-6 team">
                <p>Team B</p>
                <kendo-sortable [data]="palettes.TeamB"
                    [zone] = "'second'"
                    [acceptZones] = "['first']"
                    [emptyText] = "'Move employees from Team A to Team B.'"
                    [itemClass] = "'employee'"
                    [emptyItemClass] ="'empty'"
                    [activeItemClass] = "'employee active'">
                </kendo-sortable>
            </div>
        </div>
    </div>
    `,
    styleUrls: ['examples/styles.component.css'],
    encapsulation: ViewEncapsulation.None
})
 class AppComponent {
    public palettes: any = this.palettes = {
        "TeamA": ['Peter Franken', 'Patricia McKenna', 'Renate Messner', 'Simon Crowther', 'Catherine Dewey'],
        "TeamB": []
    };
}

Drag between Lists

When dragged from the source to the target Sortable component, the currently active item is hidden in the original one through the visible:false and display:none inline styles. While dragging takes place, the item is removed from the original (source) component on dragEnd (mouse up) and added to the second (target) component on dragOver. As a result, between the dragEnd and the dragOver actions, 2 identical items simultaneously exist in both the source and the target Sortable components.

The following example demonstrates how to enable the dragging of items between different items list.

import {Component, ViewEncapsulation} from '@angular/core';

@Component({
    selector: 'my-app',
    template: `
    <div class="example-config">
            <h5>Team A: {{palettes.TeamA | json}}</h5>
            <h5>Team B: {{palettes.TeamB | json}}</h5>
    </div>
    <div class="container-fluid">
        <div class="row">
            <div class="col-xs-12 col-sm-6 team">
                <p>Team A</p>
                <kendo-sortable [data]="palettes.TeamA"
                    [zone] = "'twoWay'"
                    [emptyText] = "'Move employees from Team B to Team A.'"
                    [itemClass] = "'employee'"
                    [emptyItemStyle]= "{'min-height': '150px', width:'100%'}"
                    [emptyItemClass] ="'empty'"
                    [activeItemClass] = "'employee active'">
                </kendo-sortable>
            </div>
            <div class="col-xs-12 col-sm-6 team team-b">
                <p>Team B</p>
                <kendo-sortable [data]="palettes.TeamB"
                    [zone] = "'twoWay'"
                    [emptyText] = "'Move employees from Team A to Team B.'"
                    [itemClass] = "'employee'"
                    [emptyItemStyle]= "{'min-height': '150px', width:'100%'}"
                    [emptyItemClass] ="'empty'"
                    [activeItemClass] = "'employee active'">
                </kendo-sortable>
            </div>
        </div>
    </div>
`,
    styleUrls: ['examples/styles.component.css'],
    encapsulation: ViewEncapsulation.None
})
 class AppComponent {
    public palettes: any = this.palettes = {
        "TeamA": ['Peter Franken', 'Simon Crowther', 'Catherine Dewey'],
        "TeamB": ['Lino Rodriguez', 'Paolo Accorti']
    };
}
In this article