All Components

Templates

The Sortable enables you to customize its content by using templates.

import { Component, ViewEncapsulation } from '@angular/core';
import { SortableModule } from '@progress/kendo-angular-sortable';

@Component({
    selector: 'my-app',
    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
      [kendoSortableBinding]="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
              [kendoSortableBinding]="palette.data"
              [itemStyle] = "{'border': '0px', 'opacity':'1', 'cursor': 'move'}"
              [emptyItemStyle] = "{'height': '30px', 'border': '2px dashed black'}"
              [activeItemStyle] = "{'border': '2px dashed black', 'opacity':'0.7'}"
              zone="innerZone">
                  <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);
In this article