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

Configuration

Disable Items

It is possible to 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;
      }
  }
}

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.

Drag Items One-Way

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 Items between Lists

The following example demonstrates how to enable the dragging of items between diffenrent 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