All Components

ScrollViewComponent

Represents the Kendo UI ScrollView component for Angular.

@Component({
    selector: 'my-app',
    template: `
      <kendo-scrollview
         [data]="items"
         [width]="width"
         [height]="height"
         [endless]="endless"
         [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 width: string = "600px";
 public height: string = "400px";
 public endless: boolean = false;
 public pageable: boolean = false;
 public items: any[] = [
      { title: 'Flower', url: 'https://bit.ly/2cJjYuB' },
      { title: 'Mountain', url: 'https://bit.ly/2cTBNaL' },
      { title: 'Sky', url: 'https://bit.ly/2cJl3Cx' }
 ];
}

Selector

kendo-scrollview

Export Name

Accessible in templates as #kendoScrollViewInstance="kendoScrollView"

Inputs

animate boolean

Enables or disables the built-in animations (see example).
By default, animate is set to true and animations are enabled.

arrows boolean

Enables or disables the built-in navigation arrows (see example).
By default, arrows is set to false and arrows are disabled.

data Array

Provides the data source for the ScrollView (see example).

endless boolean

Enables or disables the endless scrolling mode in which the data source items are endlessly looped
(see example). By default, endless is set to false
and the endless scrolling mode is disabled.

height string

Sets the height of the ScrollView (see example).
By default, the height is not set and you have to explicitly define the height value.

pageable boolean

Enables or disables the built-in pager (see example).
By default, pageable is set to false and paging is disabled.

width string

Sets the width of the ScrollView (see example).
By default, the width is not set and you have to explicitly define the width value.

activeIndex number

Represents the current item index (see example).

Events

itemChanged EventEmitter<ItemChangedEvent>

Fires after the current item is changed.

Methods

next

Navigates the ScrollView to the next item.

prev

Navigates the ScrollView to the previous item.

In this article