All Components

Right-to-Left Support

Right-to-Left (RTL) support is the ability of a library, website, or application to respond to users who communicate through right-to-left languages such as Arabic, Hebrew, Chinese, and Japanese.

Configuration

In web applications, the RTL mode can be enabled with the dir attribute of a DOM element.

To enable the RTL mode for all Kendo UI components in your Angular application, provide a text direction value by using the RTL token in the root module of the application.

You can also limit the RTL mode to a part of the application by providing the token to a sub-module. By default, the RTL mode is disabled.

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

@Component({
  selector: 'my-upload',
  template: `
  <kendo-upload
    [saveUrl]="uploadSaveUrl"
    [removeUrl]="uploadRemoveUrl"
    [autoUpload]="false">
  </kendo-upload>
  `
})
export class UploadComponent {
  uploadSaveUrl: string = "saveUrl";
  uploadRemoveUrl: string = "removeUrl";
}
import { Component, Injectable } from '@angular/core';
import { HttpInterceptor, HttpRequest, HttpHandler, HttpEvent, HttpProgressEvent, HttpEventType, HttpResponse } from '@angular/common/http';
import { Observable } from 'rxjs/Observable';
import 'rxjs/add/operator/delay';
import 'rxjs/add/observable/of';
import 'rxjs/add/observable/concat';

@Component({
    selector: 'my-app',
    template: `<my-upload></my-upload>`
})
export class AppComponent {
}

@Injectable()
export class UploadInterceptor implements HttpInterceptor {
  intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
    if (req.url === "saveUrl") {
      let events: Observable<HttpEvent<any>>[] = [0, 30, 60, 100].map((x) => Observable.of(<HttpProgressEvent>{
        type: HttpEventType.UploadProgress,
        loaded: x,
        total: 100
      }).delay(1000));

      const success = Observable.of(new HttpResponse({ status: 200 })).delay(1000);
      events.push(success);

      return Observable.concat(...events);
    }

    if (req.url === "removeUrl") {
        return Observable.of(new HttpResponse({ status: 200 }));
    }

    return next.handle(req);
  }
}
import { enableProdMode, NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { HttpClientModule, HTTP_INTERCEPTORS } from '@angular/common/http';
import { UploadModule } from '@progress/kendo-angular-upload';
import { AppComponent }   from './app.component';
import { UploadComponent }  from './upload.component';
import { UploadInterceptor } from './app.component';
import { RTL } from '@progress/kendo-angular-l10n';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';

@NgModule({
  imports:      [ BrowserModule, HttpClientModule, UploadModule, BrowserAnimationsModule ],
  declarations: [ AppComponent, UploadComponent ],
  bootstrap:    [ AppComponent ],
  providers: [
    {
      provide: RTL,
      useValue: true
    },
    {
      provide: HTTP_INTERCEPTORS,
      useClass: UploadInterceptor,
      multi: true
    }
  ]
})

export class AppModule { }

enableProdMode();

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
const platform = platformBrowserDynamic();
platform.bootstrapModule(AppModule);
In this article