All Components

ScrollViewComponent

Represents the Kendo UI ScrollView component for Angular.

@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"
         [endless]="endless"
         [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 width: string = "600px";
 public height: string = "400px";
 public endless: boolean = false;
 public pageable: boolean = false;
 public items: any[] = [
      { title: 'Flower', url: 'http://bit.ly/2cJjYuB' },
      { title: 'Mountain', url: 'http://bit.ly/2cTBNaL' },
      { title: 'Sky', url: 'http://bit.ly/2cJl3Cx' }
 ];
}

Selector

kendo-scrollview

Inputs

animate boolean

Enables or disables the built-in animations.
By default, animate is set to true.

arrows boolean

Enables or disables the built-in navigation arrows.
By default, arrows is set to false.

data Array<any>

Provides the data source for the ScrollView.

endless boolean

Enables or disables the endless scrolling mode in which the data source items are looped in an endless fashion.
By default, endless is set to false.

height string

Sets the height value to the ScrollView.
You have to configure the height value explicitly.

pageable boolean

Enables or disables the built-in pager.
By default, pageable is set to false.

width string

Sets the width value to the ScrollView.
You have to configure the width value explicitly.

activeIndex number

Represents the current item index.

Events

itemChanged EventEmitter

The ItemChanged event is triggered after the current item is changed.

Methods

next

Navigate the ScrollView to the next item.

prev

Navigate the ScrollView to the previous item.

In this article