All Components

ScrollView Overview

The ScrollView displays a collection of images or other content in a horizontal layout with built-in navigation between the items.

Demos

The following example demonstrates the basic usage of the ScrollView.

@Component({
  selector: 'my-app',
  styles: [`
    .demo-title {
      background-color: #3f8cca;
      border: 1px solid #306b9e;
      border-radius: 2px;
      min-height: 28px;
      padding: 5px 15px 5px 15px;
      margin: 0px;
      color: #fff;
      font-family: "Segoe UI", Frutiger, "Frutiger Linotype", "Dejavu Sans", "Helvetica Neue", Arial, sans-serif;
      text-overflow: ellipsis;
      white-space: nowrap;
      overflow: hidden;
    }
  `]
  template: `
  <kendo-scrollview
    [data]="items"
    [width]="width"
    [height]="height"
    [arrows]="true"
    [pageable]="true">
      <template let-item="item">
          <h2 class="demo-title">{{item.title}}</h2>
          <img src='{{item.url}}' alt='{{item.title}}' [ngStyle]="{minWidth: width}" draggable="false" />
      </template>
  </kendo-scrollview>
  `
})
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 = "600px";
public height: string = "400px";
}

Installation

The ScrollView is published as a scoped package on the on the Progress NPM Registry (https://registry.npm.telerik.com/).

Install the package by using NPM.

To install the npm package, it is recommended to use the Node.js 5.0.0 or later versions.

   npm install --save @progress/kendo-angular-scrollview

Once installed, import the ScrollViewModule in your application bootstrap.

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { ScrollViewModule } from '@progress/kendo-angular-scroll-view';
import { AppComponent } from './app.component';

@NgModule({
    bootstrap:    [AppComponent],
    declarations: [AppComponent],
    imports:      [BrowserModule, ScrollViewModule]
})
export class AppModule {
}

Configuration

Animation

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

@Component({
  selector: 'my-app',
  styles: [`
    .demo-title {
      background-color: #3f8cca;
      border: 1px solid #306b9e;
      border-radius: 2px;
      min-height: 28px;
      padding: 5px 15px 5px 15px;
      margin: 0px;
      color: #fff;
      font-family: "Segoe UI", Frutiger, "Frutiger Linotype", "Dejavu Sans", "Helvetica Neue", Arial, sans-serif;
      text-overflow: ellipsis;
      white-space: nowrap;
      overflow: hidden;
    }
  `],
  template: `
  <kendo-scrollview
    [data]="items"
    [width]="width"
    [height]="height"
    [animate]="animate"
    [arrows]="true"
    [pageable]="true">
      <template let-item="item">
          <h2 class="demo-title">{{item.title}}</h2>
          <img src='{{item.url}}' alt='{{item.title}}' [ngStyle]="{minWidth: width}" draggable="false" />
      </template>
  </kendo-scrollview>
  `
})
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 = "600px";
public height: string = "400px";
public animate: boolean = true;
}

Arrows

To enable or disable the built-in navigation arrows, configure the arrows property. By default, arrows is set to false.

@Component({
  selector: 'my-app',
  styles: [`
    .demo-title {
      background-color: #3f8cca;
      border: 1px solid #306b9e;
      border-radius: 2px;
      min-height: 28px;
      padding: 5px 15px 5px 15px;
      margin: 0px;
      color: #fff;
      font-family: "Segoe UI", Frutiger, "Frutiger Linotype", "Dejavu Sans", "Helvetica Neue", Arial, sans-serif;
      text-overflow: ellipsis;
      white-space: nowrap;
      overflow: hidden;
    }
  `],
  template: `
  <kendo-scrollview
    [data]="items"
    [width]="width"
    [height]="height"
    [arrows]="arrows">
      <template let-item="item">
          <h2 class="demo-title">{{item.title}}</h2>
          <img src='{{item.url}}' alt='{{item.title}}' [ngStyle]="{minWidth: width}" draggable="false" />
      </template>
  </kendo-scrollview>
  `
})
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 = "600px";
public height: string = "400px";
public arrows: boolean = true;
}

Endless Scrolling Mode

The endless scrolling mode loops the ScrollView items in an endless fashion.

To enable or disable the endless scrolling mode, configure the endless property. By default, endless is set to false.

@Component({
  selector: 'my-app',
  styles: [`
    .demo-title {
      background-color: #3f8cca;
      border: 1px solid #306b9e;
      border-radius: 2px;
      min-height: 28px;
      padding: 5px 15px 5px 15px;
      margin: 0px;
      color: #fff;
      font-family: "Segoe UI", Frutiger, "Frutiger Linotype", "Dejavu Sans", "Helvetica Neue", Arial, sans-serif;
      text-overflow: ellipsis;
      white-space: nowrap;
      overflow: hidden;
    }
  `],
  template: `
  <kendo-scrollview
    [data]="items"
    [width]="width"
    [height]="height"
    [arrows]="true"
    [endless]="endless">
      <template let-item="item">
          <h2 class="demo-title">{{item.title}}</h2>
          <img src='{{item.url}}' alt='{{item.title}}' [ngStyle]="{minWidth: width}" draggable="false" />
      </template>
  </kendo-scrollview>
  `
})
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 = "600px";
public height: string = "400px";
public endless: boolean = true;
}

Width and Height

The ScrollView enables you to specify the width and the height of the component through its width and height properties. You have to set both properties because they do not have configured default values.

@Component({
  selector: 'my-app',
  styles: [`
    .demo-title {
      background-color: #3f8cca;
      border: 1px solid #306b9e;
      border-radius: 2px;
      min-height: 28px;
      padding: 5px 15px 5px 15px;
      margin: 0px;
      color: #fff;
      font-family: "Segoe UI", Frutiger, "Frutiger Linotype", "Dejavu Sans", "Helvetica Neue", Arial, sans-serif;
      text-overflow: ellipsis;
      white-space: nowrap;
      overflow: hidden;
    }
  `],
  template: `
  <kendo-scrollview
    [data]="items"
    [width]="width"
    [height]="height">
      <template let-item="item">
          <h2 class="demo-title">{{item.title}}</h2>
          <img src='{{item.url}}' alt='{{item.title}}' [ngStyle]="{minWidth: width}" draggable="false" />
      </template>
  </kendo-scrollview>
  `
})
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 = "600px";
public height: string = "400px";
}

Paging

You can enable or disable the built-in paging functionality of the ScrollView through the pageable property. By default, pageable is set to false.

@Component({
  selector: 'my-app',
  styles: [`
    .demo-title {
      background-color: #3f8cca;
      border: 1px solid #306b9e;
      border-radius: 2px;
      min-height: 28px;
      padding: 5px 15px 5px 15px;
      margin: 0px;
      color: #fff;
      font-family: "Segoe UI", Frutiger, "Frutiger Linotype", "Dejavu Sans", "Helvetica Neue", Arial, sans-serif;
      text-overflow: ellipsis;
      white-space: nowrap;
      overflow: hidden;
    }
  `],
  template: `
  <kendo-scrollview
    [data]="items"
    [width]="width"
    [height]="height"
    [pageable]="pageable">
      <template let-item="item">
          <h2 class="demo-title">{{item.title}}</h2>
          <img src='{{item.url}}' alt='{{item.title}}' [ngStyle]="{minWidth: width}" draggable="false" />
      </template>
  </kendo-scrollview>
  `
})
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 = "600px";
public height: string = "400px";
public pageable: boolean = true;
}

Data Providing

The ScrollView allows you to provide the data source for the component through its data property.

@Component({
  selector: 'my-app',
  styles: [`
    .demo-title {
      background-color: #3f8cca;
      border: 1px solid #306b9e;
      border-radius: 2px;
      min-height: 28px;
      padding: 5px 15px 5px 15px;
      margin: 0px;
      color: #fff;
      font-family: "Segoe UI", Frutiger, "Frutiger Linotype", "Dejavu Sans", "Helvetica Neue", Arial, sans-serif;
      text-overflow: ellipsis;
      white-space: nowrap;
      overflow: hidden;
    }
  `],
  template: `
  <kendo-scrollview
    [data]="items"
    [width]="width"
    [height]="height">
      <template let-item="item">
          <h2 class="demo-title">{{item.title}}</h2>
          <img src='{{item.url}}' alt='{{item.title}}' [ngStyle]="{minWidth: width}" draggable="false" />
      </template>
  </kendo-scrollview>
  `
})
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 = "600px";
public height: string = "400px";
}

Active Item

You can set the active item of the ScrollView through the activeIndex property. By default, activeIndex displays the first item.

@Component({
  selector: 'my-app',
  styles: [`
    .demo-title {
      background-color: #3f8cca;
      border: 1px solid #306b9e;
      border-radius: 2px;
      min-height: 28px;
      padding: 5px 15px 5px 15px;
      margin: 0px;
      color: #fff;
      font-family: "Segoe UI", Frutiger, "Frutiger Linotype", "Dejavu Sans", "Helvetica Neue", Arial, sans-serif;
      text-overflow: ellipsis;
      white-space: nowrap;
      overflow: hidden;
    }
  `],
  template: `
  <kendo-scrollview
    [data]="items"
    [width]="width"
    [height]="height"
    [activeIndex]="activeIndex">
      <template let-item="item">
          <h2 class="demo-title">{{item.title}}</h2>
          <img src='{{item.url}}' alt='{{item.title}}' [ngStyle]="{minWidth: width}" draggable="false" />
      </template>
  </kendo-scrollview>
  `
})
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 = "600px";
public height: string = "400px";
public activeIndex: number = 1;
}

Keyboard Navigation

The following table lists the keyboard shortcuts supported by the ScrolView.

SHORTCUT DESCRIPTION
Left Arrow key Navigate to the previous item.
Right Arrow key Navigate to the next item.

Accessibility

The ScrollView is WAI ARIA-accessible through the Tab key. Once the component is focused, the user can navigate with the Left Arrow and Right Arrow keys. The Next and Previous buttons have ARIA-labels.

In this article