Components / ScrollView

ScrollView Overview

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

It can be scrolled through dragging, applying gestures, arrow clicking, page clicking, or tapping.

The ScrollView wrapper for Vue is a client-side wrapper for the Kendo UI ScrollView widget.

Basic Usage

The following example demonstrates how to initialize the ScrollView.

<div id="vueapp" class="vue-app">
    <kendo-datasource ref="datasource1"
                      :type="'odata'"
                      :page-size="pageSize"
                      :server-paging="true"
                      :transport-read="'https://demos.telerik.com/kendo-ui/service/Northwind.svc/Products'">
    </kendo-datasource>
    <div>
        <kendo-scrollview  :data-source-ref="'datasource1'"
                          :enable-pager="true"
                          :template="itemTemplate"
                          v-bind:style="{ height: '300px', width: '600px',background: '#eee'}"
                          >
        </kendo-scrollview>
    </div>
</div>
Vue.use(ScrollViewInstaller);
Vue.use(DataSourceInstaller);

new Vue({
    el: '#vueapp',
    data () {
      return {
          page: 1,
          pageSize: 18,
          itemTemplate:
            '# for (var i = 0; i < data.length; i++) { #' +
            '<div class="product" style="width: 100px; float: left; height: 100px; color: white; background-image:url(https://demos.telerik.com/kendo-ui/content/web/foods/#=data[i].ProductID#.jpg)" title="#=data[i].ProductName#">' +                
            '</div>' +
            '# } #'
        }
    }
})

Installation

To initialize the ScrollView, either:

Initializing with Webpack

  1. Install Kendo UI and add a theme.

    npm install --save @progress/kendo-ui
npm install --save @progress/kendo-theme-default

  2. Install the Kendo UI ScrollView package for Vue.

    npm install --save @progress/kendo-scrollview-vue-wrapper

  3. Import the Kendo UI packages to the App component. If you use the Kendo UI components more than once in your application, add all Kendo UI-related files to the main.js file. If you use the Kendo UI components once in your application, add the Kendo UI-related files the component where they will be referred.

    import '@progress/kendo-ui'
import '@progress/kendo-theme-default/dist/all.css'

import { ScrollView } from '@progress/kendo-scrollview-vue-wrapper'
import { ScrollViewInstaller } from '@progress/kendo-scrollview-vue-wrapper'

Vue.use(ScrollViewInstaller)

new Vue({
    el: '#app',
    components: {
        ScrollView
    }
})

Events

The following example demonstrates basic ScrollView events. You can subscribe to all events of the ScrollView by the handler name.

<div id="vueapp" class="vue-app">
    <kendo-datasource ref="datasource1"
                      :type="'odata'"
                      :pageSize="pageSize"
                      :serverPaging="true"
                      :transportRead="'https://demos.telerik.com/kendo-ui/service/Northwind.svc/Products'">
    </kendo-datasource>
    <div>
    <kendo-scrollview  :dataSourceRef="'datasource1'"
                      :enablePager="true"
                      v-on:change="onChange"
                      :template="itemTemplate"
                      v-bind:style="{ height: '600px' }"
                      >
    </kendo-scrollview>
    </div>
</div>
Vue.use(ScrollViewInstaller);

new Vue({
    el: '#vueapp',
    data () {
      return {
          page: 1,
          pageSize: 3,
          itemTemplate:
            '# for (var i = 0; i < data.length; i++) { #' +
            '<div>' +
                '<div>#= data[i].ProductName #</div>' +
            '</div>' +
            '# } #'
      }
    }
    methods: {
      onChange () {
        console.log("ScrollView item was changed.");
      }
    }
})

In this article