All Components

ScrollView Overview

The ScrollView displays a horizontal collection of content or image views with built-in navigation between them.

Basic Usage

The following example demonstrates the ScrollView in action.

import { Component } from '@angular/core';
@Component({
  selector: 'my-app',
  template: `
  <kendo-scrollview
    [data]="items"
    [width]="width"
    [height]="height"
    [arrows]="true"
    [pageable]="true">
      <ng-template let-item="item">
          <h2 class="demo-title">{{item.title}}</h2>
          <img src='{{item.url}}' alt='{{item.title}}' [ngStyle]="{minWidth: width}" draggable="false" />
      </ng-template>
  </kendo-scrollview>
  `,
  styles: [`
    .k-scrollview-wrap {
      margin: 0 auto;
    }
    .demo-title {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      margin: 0;
      padding: 15px;
      color: #fff;
      background-color: rgba(0,0,0,.4);
      text-align: center;
      font-size: 24px;
    }
  `]
})
export class AppComponent {
  public items: any[] = [
    { title: 'Flower', url: 'http://bit.ly/2cJjYuB' },
    { title: 'Mountain', url: 'http://bit.ly/2cTBNaL' },
    { title: 'Sky', url: 'http://bit.ly/2cJl3Cx' }
  ];
  public width: string = "100%";
  public height: string = "500px";
}
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { ScrollViewModule } from '@progress/kendo-angular-scrollview';
import { AppComponent } from './app.component';

@NgModule({
    bootstrap:    [AppComponent],
    declarations: [AppComponent],
    imports:      [BrowserModule, BrowserAnimationsModule, ScrollViewModule]
})
export class AppModule {}
import { AppModule } from './app.module';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';

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

Installation

  1. Download and install the package:

    npm install --save @progress/kendo-angular-scrollview @angular/animations
  2. Once installed, import the ScrollViewModule in your application root module:

    import { NgModule } from '@angular/core';
    import { BrowserModule } from '@angular/platform-browser';
    import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
    import { ScrollViewModule } from '@progress/kendo-angular-scrollview';
    import { AppComponent } from './app.component';
    
    @NgModule({
       bootstrap:    [AppComponent],
       declarations: [AppComponent],
       imports:      [BrowserModule, BrowserAnimationsModule, ScrollViewModule]
    })
    export class AppModule {
    }
  3. You are required to install one of the Kendo UI themes for Angular to style your component. For more information on how to add the styles, refer to the article on getting started.

Dependencies

The ScrollView package requires the following peer dependencies that have to be installed by your application:

  • @angular/animations
  • @angular/common
  • @angular/core
  • @progress/kendo-angular-l10n
  • rxjs
  • The version of the @angular/animations module has to be exactly the same as the version of the other @angular modules that are included in your project. To sync the package versions, you might need to run npm update.
  • The ScrollView package utilizes the Angular animation system, which supports a specific set of browsers.

Features

The ScrollView delivers the following features:

Animations

To enable or disable the built-in animations of the ScrollView, use the animate property. By default, animate is set to true and the animations are enabled.

@Component({
  selector: 'my-app',
  template: `
    <div class="example-config">
      <input id="animations" type="checkbox" [(ngModel)]="animate" />
      <label for="animations">Enable Animations</label>
    </div>
    <kendo-scrollview
    [data]="items"
    [width]="width"
    [height]="height"
    [animate]="animate"
    [arrows]="true"
    [pageable]="true">
      <ng-template let-item="item">
          <h2 class="demo-title">{{item.title}}</h2>
          <img src='{{item.url}}' alt='{{item.title}}' [ngStyle]="{minWidth: width}" draggable="false" />
      </ng-template>
  </kendo-scrollview>
  `,
  styles: [`
    .k-scrollview-wrap {
      margin: 0 auto;
    }
    .demo-title {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      margin: 0;
      padding: 15px;
      color: #fff;
      background-color: rgba(0,0,0,.4);
      text-align: center;
      font-size: 24px;
    }
  `]
})
class AppComponent {
public items: any[] = [
    { title: 'Flower', url: 'http://bit.ly/2cJjYuB' },
    { title: 'Mountain', url: 'http://bit.ly/2cTBNaL' },
    { title: 'Sky', url: 'http://bit.ly/2cJl3Cx' }
];
public width: string = "100%";
public height: string = "400px";
public animate: boolean = true;
}

Arrows

To enable or disable the built-in navigation arrows, use the arrows property. By default, arrows is set to false and the arrows are disabled.

@Component({
  selector: 'my-app',
  template: `
  <div class="example-config">
    <input id="arrows" type="checkbox" [(ngModel)]="arrows" />
    <label for="arrows">Enable Arrows</label>
  </div>
  <kendo-scrollview
    [data]="items"
    [width]="width"
    [height]="height"
    [arrows]="arrows">
      <ng-template let-item="item">
          <h2 class="demo-title">{{item.title}}</h2>
          <img src='{{item.url}}' alt='{{item.title}}' [ngStyle]="{minWidth: width}" draggable="false" />
      </ng-template>
  </kendo-scrollview>
  `,
  styles: [`
    .k-scrollview-wrap {
      margin: 0 auto;
    }
    .demo-title {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      margin: 0;
      padding: 15px;
      color: #fff;
      background-color: rgba(0,0,0,.4);
      text-align: center;
      font-size: 24px;
    }
  `]
})
class AppComponent {
public items: any[] = [
    { title: 'Flower', url: 'http://bit.ly/2cJjYuB' },
    { title: 'Mountain', url: 'http://bit.ly/2cTBNaL' },
    { title: 'Sky', url: 'http://bit.ly/2cJl3Cx' }
];
public width: string = "100%";
public height: string = "400px";
public arrows: boolean = true;
}

Paging

To enable or disable the built-in paging functionality of the ScrollView, use the pageable property. By default, pageable is set to false and paging is disabled.

@Component({
  selector: 'my-app',
  template: `
  <div class="example-config">
    <input id="paging" type="checkbox" [(ngModel)]="pageable" />
    <label for="paging">Enable Pager</label>
  </div>
  <kendo-scrollview
    [data]="items"
    [width]="width"
    [height]="height"
    [pageable]="pageable">
      <ng-template let-item="item">
          <h2 class="demo-title">{{item.title}}</h2>
          <img src='{{item.url}}' alt='{{item.title}}' [ngStyle]="{minWidth: width}" draggable="false" />
      </ng-template>
  </kendo-scrollview>
  `,
  styles: [`
    .k-scrollview-wrap {
      margin: 0 auto;
    }
    .demo-title {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      margin: 0;
      padding: 15px;
      color: #fff;
      background-color: rgba(0,0,0,.4);
      text-align: center;
      font-size: 24px;
    }
  `]
})
class AppComponent {
public items: any[] = [
    { title: 'Flower', url: 'http://bit.ly/2cJjYuB' },
    { title: 'Mountain', url: 'http://bit.ly/2cTBNaL' },
    { title: 'Sky', url: 'http://bit.ly/2cJl3Cx' }
];
public width: string = "100%";
public height: string = "400px";
public pageable: boolean = true;
}

Endless Scrolling Mode

The endless scrolling mode loops the ScrollView views in an endless manner. To enable or disable the endless scrolling mode, set the endless property. By default, endless is set to false and the endless scrolling is disabled.

@Component({
  selector: 'my-app',
  template: `
  <div class="example-config">
    <input id="endless" type="checkbox" [(ngModel)]="endless" />
    <label for="endless">Enable Endless Scrolling Mode</label>
  </div>
  <kendo-scrollview
    [data]="items"
    [width]="width"
    [height]="height"
    [arrows]="true"
    [endless]="endless">
      <ng-template let-item="item">
          <h2 class="demo-title">{{item.title}}</h2>
          <img src='{{item.url}}' alt='{{item.title}}' [ngStyle]="{minWidth: width}" draggable="false" />
      </ng-template>
  </kendo-scrollview>
  `,
  styles: [`
    .k-scrollview-wrap {
      margin: 0 auto;
    }
    .demo-title {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      margin: 0;
      padding: 15px;
      color: #fff;
      background-color: rgba(0,0,0,.4);
      text-align: center;
      font-size: 24px;
    }
  `]
})
class AppComponent {
public items: any[] = [
    { title: 'Flower', url: 'http://bit.ly/2cJjYuB' },
    { title: 'Mountain', url: 'http://bit.ly/2cTBNaL' },
    { title: 'Sky', url: 'http://bit.ly/2cJl3Cx' }
];
public width: string = "100%";
public height: string = "400px";
public endless: boolean = false;
}

Width and Height

To specify the width and the height of the ScvrollView, use the width and height properties. The width and height settings do not have default values and you have to set both of them.

@Component({
  selector: 'my-app',
  template: `
  <kendo-scrollview
    [data]="items"
    [width]="width"
    [height]="height">
      <ng-template let-item="item">
          <h2 class="demo-title">{{item.title}}</h2>
          <img src='{{item.url}}' alt='{{item.title}}' [ngStyle]="{minWidth: width}" draggable="false" />
      </ng-template>
  </kendo-scrollview>
  `,
  styles: [`
    .k-scrollview-wrap {
      margin: 0 auto;
    }
    .demo-title {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      margin: 0;
      padding: 15px;
      color: #fff;
      background-color: rgba(0,0,0,.4);
      text-align: center;
      font-size: 24px;
    }
  `]
})
class AppComponent {
public items: any[] = [
    { title: 'Flower', url: 'http://bit.ly/2cJjYuB' },
    { title: 'Mountain', url: 'http://bit.ly/2cTBNaL' },
    { title: 'Sky', url: 'http://bit.ly/2cJl3Cx' }
];
public width: string = "100%";
public height: string = "400px";
}

Data Sources

To provide the data source for the ScrollView, use the data property.

@Component({
  selector: 'my-app',
  template: `
  <kendo-scrollview
    [data]="items"
    [width]="width"
    [height]="height">
      <ng-template let-item="item">
          <h2 class="demo-title">{{item.title}}</h2>
          <img src='{{item.url}}' alt='{{item.title}}' [ngStyle]="{minWidth: width}" draggable="false" />
      </ng-template>
  </kendo-scrollview>
  `,
  styles: [`
    .k-scrollview-wrap {
      margin: 0 auto;
    }
    .demo-title {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      margin: 0;
      padding: 15px;
      color: #fff;
      background-color: rgba(0,0,0,.4);
      text-align: center;
      font-size: 24px;
    }
  `]
})
class AppComponent {
public items: any[] = [
    { title: 'Flower', url: 'http://bit.ly/2cJjYuB' },
    { title: 'Mountain', url: 'http://bit.ly/2cTBNaL' },
    { title: 'Sky', url: 'http://bit.ly/2cJl3Cx' }
];
public width: string = "100%";
public height: string = "400px";
}

Active Items

To set the active item of the ScrollView, use the activeIndex property. By default, activeIndex displays the first item.

@Component({
  selector: 'my-app',
  template: `
  <kendo-scrollview
    [data]="items"
    [width]="width"
    [height]="height"
    [activeIndex]="activeIndex">
      <ng-template let-item="item">
          <h2 class="demo-title">{{item.title}}</h2>
          <img src='{{item.url}}' alt='{{item.title}}' [ngStyle]="{minWidth: width}" draggable="false" />
      </ng-template>
  </kendo-scrollview>
  `,
  styles: [`
    .k-scrollview-wrap {
      margin: 0 auto;
    }
    .demo-title {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      margin: 0;
      padding: 15px;
      color: #fff;
      background-color: rgba(0,0,0,.4);
      text-align: center;
      font-size: 24px;
    }
  `]
})
class AppComponent {
public items: any[] = [
    { title: 'Flower', url: 'http://bit.ly/2cJjYuB' },
    { title: 'Mountain', url: 'http://bit.ly/2cTBNaL' },
    { title: 'Sky', url: 'http://bit.ly/2cJl3Cx' }
];
public width: string = "100%";
public height: string = "400px";
public activeIndex: number = 1;
}
In this article