The globalization process combines the translation of component messages with adapting them to specific cultures.

For more information on how globalization practices are implemented in Kendo UI for Angular, refer to the overview article. For more information on the globalization aspects which are available for each component, refer to the article on globalization support.


The internationalization (i18n) process applies specific culture formats to a web application.

For more information, refer to:


The Sortable does not provide built-in translated messages or the option to implement and localize custom ones.

Right-to-Left Support

The following example demonstrates how to utilize the RTL support for the Sortable.

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

  selector: 'my-app',
  template: `
    <div class="example-config">
        <h6>Items: {{items | json}}</h6>
    <div class="container-fluid">
            [animation] = "true"
            itemClass="item col-xs-6 col-sm-3"
            activeItemClass="item col-xs-6 col-sm-3 active"
  encapsulation: ViewEncapsulation.None,
  styleUrls: ['styles.css']
export class AppComponent {
  public items: string[] = [
    'Item 1', 'Item 2', 'Item 3', 'Item 4', 'Item 5', 'Item 6', 'Item 7', 'Item 8'
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 { RTL } from '@progress/kendo-angular-l10n';
import { AppComponent } from './app.component';

    bootstrap:    [AppComponent],
    declarations: [AppComponent],
    imports:      [BrowserModule, BrowserAnimationsModule, SortableModule],
    providers:    [{ provide: RTL, useValue: true }]
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;

.employee:hover {
    opacity: 0.8;
}, {
    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 {
    background-color: #dd4672;
    color: #fff;

.empty {
    height: 150px;
import { AppModule } from './app.module';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';

const platform = platformBrowserDynamic();

In this article