Items

The Sortable allows you to disable its items and to move items between two or more Sortable components.

Disabled Items

To disable items, use the disabledIndexes property of the Sortable.

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">
        <kendo-sortable
            [data]="items"
            [navigatable]="true"
            [animation]="true"
            [disabledIndexes]="disabledIndexes"
            class="row"
            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>
  `,
  styleUrls: ['styles.css'],
  encapsulation: ViewEncapsulation.None
})
export class AppComponent {
    public disabledIndexes = [0, 2, 5, 7];
    public items: string[] = [];

    constructor() {
        for (let i = 0; i < 8; i++) {
            this.items[i] = 'Item ' + i;
        }
    }
}

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

.item {
    background-color: #bfe7f9;
    color: #1494d0;
    border: 1px solid #fff;
    height: 70px;
    line-height: 68px;
    font-size: 16px;
    text-align: center;
    outline: none;
    cursor: move;
}

.item:hover,
.employee:hover {
    opacity: 0.8;
}

.item.active,
.employee.active {
    background-color: #27aceb;
    color: #fff;
    border-color: #27aceb;
    z-index: 10;
}

.item.disabled {
    opacity: 0.5;
    cursor: default;
}

.team {
    min-height: 240px;
    padding-top: 15px;
    padding-bottom: 15px;
    border: 1px solid #fff;
    background-color: #dff3fc;
}

.team-b {
    background-color: #fbe0e7;
}

.employee {
    background-color: #bfe7f9;
    color: #1494d0;
    margin: 1px;
    padding: 5px;
    cursor: move;
}

.team-b .employee {
    background-color: #f3b9c9;
    color: #dd4672;
}

.team-b .employee.active {
    background-color: #dd4672;
    color: #fff;
}

.empty {
    height: 150px;
}

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

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

Transfer of Items

To enable the user to move and transfer items between two or more Sortable components by dragging and dropping, utilize the drag zones of the components and set the zone and acceptZones properties.

When dragged from the source to the target component, hide the currently active item in the source Sortable through the visible:false and display:none inline styles. While the dragging of the item happens, the item is removed from the source component on dragEnd (mouse up) and added to the target component on dragOver. As a result, between the dragEnd and the dragOver actions and at the same time, in both the source and the target Sortable components two identical items exist.

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

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">
                <h5>Team A</h5>
                <kendo-sortable [data]="palettes.TeamA"
                    zone="twoWay"
                    emptyText="Move employees from Team B to Team A."
                    class="row"
                    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">
                <h5>Team B</h5>
                <kendo-sortable [data]="palettes.TeamB"
                    zone="twoWay"
                    emptyText="Move employees from Team A to Team B."
                    class="row"
                    itemClass="employee"
                    [emptyItemStyle]="{'min-height': '150px', width:'100%'}"
                    emptyItemClass="empty"
                    activeItemClass="employee active">
                </kendo-sortable>
            </div>
        </div>
    </div>
`,
    styleUrls: ['styles.css'],
    encapsulation: ViewEncapsulation.None
})
export class AppComponent {
    public palettes = {
        'TeamA': ['Peter Franken', 'Simon Crowther', 'Catherine Dewey'],
        'TeamB': ['Lino Rodriguez', 'Paolo Accorti']
    };
}

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

.item {
    background-color: #bfe7f9;
    color: #1494d0;
    border: 1px solid #fff;
    height: 70px;
    line-height: 68px;
    font-size: 16px;
    text-align: center;
    outline: none;
    cursor: move;
}

.item:hover,
.employee:hover {
    opacity: 0.8;
}

.item.active,
.employee.active {
    background-color: #27aceb;
    color: #fff;
    border-color: #27aceb;
    z-index: 10;
}

.item.disabled {
    opacity: 0.5;
    cursor: default;
}

.team {
    min-height: 240px;
    padding-top: 15px;
    padding-bottom: 15px;
    border: 1px solid #fff;
    background-color: #dff3fc;
}

.team-b {
    background-color: #fbe0e7;
}

.employee {
    background-color: #bfe7f9;
    color: #1494d0;
    margin: 1px;
    padding: 5px;
    cursor: move;
}

.team-b .employee {
    background-color: #f3b9c9;
    color: #dd4672;
}

.team-b .employee.active {
    background-color: #dd4672;
    color: #fff;
}

.empty {
    height: 150px;
}

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

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

Suggested Links

• API Reference of the Sortable