Scrolling

By default, the scrolling functionality of the Kendo UI ListView is disabled.

To control scrolling in the ListView, use the scrollable property. If set to true and if the content of the ListView exceeds the its height, the wrapper will display a scrollbar.

The ListView provides the endless scrolling functionality and is able to display large amounts of data by appending additional pages of data on demand. The loading of the new items happens when the scrollbar of the ListView reaches its end. When the data is returned, only the new items are rendered and appended to the old ones.

The endless scrolling of the ListView works with both local and remote data. When you use endless scrolling with local data, all the data is serialized on the client and when the user scrolls to the end of the scrollbar, the ListView displays the new items.

The following example demonstrates how to implement endless scrolling with local data.

<div id="vueapp" class="vue-app">
    <kendo-listview ref="listView"
                :data-source="localDataSource"
                :height="280"
                :scrollable="'endless'"
                :template="itemTemplate">
    </kendo-listview>
</div>
<style>
        .product-view
        {
            float: left;
            width: 50%;
            height: 300px;
            box-sizing: border-box;
            border-top: 0;
            position: relative;
        }
        .product-view:nth-child(even) {
            border-left-width: 0;
        }
        .product-view dl
        {
            margin: 10px 10px 0;
            padding: 0;
            overflow: hidden;
        }
        .product-view dt, dd
        {
            margin: 0;
            padding: 0;
            width: 100%;
            line-height: 24px;
            font-size: 18px;
        }
        .product-view dt
        {
            font-size: 11px;
            height: 16px;
            line-height: 16px;
            text-transform: uppercase;
            opacity: 0.5;
        }

        .product-view dd
        {
            height: 46px;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;

        }

        .product-view dd .k-widget,
        .product-view dd .k-textbox {
            font-size: 14px;
        }
        #example .k-listview
        {
            border-width: 1px 0 0;
            padding: 0;
        }
    </style>
Vue.use(ListViewInstaller);

new Vue({
    el: '#vueapp',
    data () {
        return {
            localDataSource: this.generatedData(),
            itemTemplate: `<div class="product-view k-widget">
            <dl>
                <dt>FirstName</dt>
                <dd>#:FirstName#</dd>
                <dt>LastName</dt>
                <dd>#:LastName#</dd>
                <dt>City</dt>
                <dd>#:City#</dd>
                <dt>BirthDate</dt>
                <dd>#:kendo.toString(BirthDate, "D")#</dd>
            </dl>
        </div>`
        }
    },
    methods: {
        generatedData: function() {
            var that = this;

            return new kendo.data.DataSource({
                pageSize: 20,
                data: that.generatePeople(2000),
                schema: {
                    model: {
                        id: "Id",
                        fields: {
                            Id: { type: "number", editable: false, nullable: true },
                            FirstName: { type: "string", validation: { required: true } },
                            LastName: { type: "string" },
                            City: { type: "string" }
                        }
                    }
                }
            });
        },
        generatePeople: function(itemCount) {
            var data = [];
            var now = new Date();
            var firstNames = ["Nancy", "Andrew", "Janet", "Margaret", "Steven", "Michael", "Robert", "Laura", "Anne", "Nige"];
            var lastNames = ["Davolio", "Fuller", "Leverling", "Peacock", "Buchanan", "Suyama", "King", "Callahan", "Dodsworth", "White"];
            var cities = ["Seattle", "Tacoma", "Kirkland", "Redmond", "London", "Philadelphia", "New York", "Seattle", "London", "Boston"];
            var birthDates = [new Date("1948/12/08"), new Date("1952/02/19"), new Date("1963/08/30"), new Date("1937/09/19"), new Date("1955/03/04"), new Date("1963/07/02"), new Date("1960/05/29"), new Date("1958/01/09"), new Date("1966/01/27"), new Date("1966/03/27")];

            for(var i = 0; i < itemCount; i++) {
                var firstName = firstNames[Math.floor(Math.random() * firstNames.length)],
                    lastName = lastNames[Math.floor(Math.random() * lastNames.length)],
                    city = cities[Math.floor(Math.random() * cities.length)],
                    birthDate = birthDates[Math.floor(Math.random() * birthDates.length)];

                data.push({
                    Id: i + 1,
                    FirstName: firstName,
                    LastName: lastName,
                    City: city,
                    BirthDate: birthDate,
                });
            }

            return data;
        }
    }
})

The following example demonstrates how to integrate endless scrolling with remote data.

<div id="vueapp" class="vue-app">

    <kendo-datasource :page-size="8" :batch="true" ref="datasource1"
      :transport-read-url="crudServiceBaseUrl + '/Products'"
      :transport-read-data-type="'jsonp'"

      :transport-update-url="crudServiceBaseUrl + '/Products/Update'"
      :transport-update-data-type="'jsonp'"

      :transport-destroy-url="crudServiceBaseUrl + '/Products/Destroy'"
      :transport-destroy-data-type="'jsonp'"

      :transport-create-url="crudServiceBaseUrl + '/Products/Create'"
      :transport-create-data-type="'jsonp'"

      :parameter-map="parameterMap"

      :schema-model-id="'ProductID'"
      :schema-model-fields="schemaModelFields">
    </kendo-datasource>

    <kendo-listview ref="listView"
                    :data-source-ref="'datasource1'"
                    :template="itemTemplate"
                    :scrollable="'endless'"
                    :height="280">
    </kendo-listview>
</div>

<style>
        .product-view
        {
            float: left;
            width: 50%;
            height: 300px;
            box-sizing: border-box;
            border-top: 0;
            position: relative;
        }
        .product-view:nth-child(even) {
            border-left-width: 0;
        }
        .product-view dl
        {
            margin: 10px 10px 0;
            padding: 0;
            overflow: hidden;
        }
        .product-view dt, dd
        {
            margin: 0;
            padding: 0;
            width: 100%;
            line-height: 24px;
            font-size: 18px;
        }
        .product-view dt
        {
            font-size: 11px;
            height: 16px;
            line-height: 16px;
            text-transform: uppercase;
            opacity: 0.5;
        }

        .product-view dd
        {
            height: 46px;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;

        }

        .product-view dd .k-widget,
        .product-view dd .k-textbox {
            font-size: 14px;
        }
        #example .k-listview
        {
            border-width: 1px 0 0;
            padding: 0;
        }
        .k-pager-wrap
        {
            border-top: 0;
        }
    </style>
Vue.use(ListViewInstaller);
Vue.use(DataSourceInstaller);

new Vue({
    el: '#vueapp',
    data () {
        return {
            crudServiceBaseUrl: 'https://demos.telerik.com/kendo-ui/service',
            itemTemplate: `<div class="product-view k-widget">
            <dl>
                <dt>Product Name</dt>
                <dd>#:ProductName#</dd>
                <dt>Unit Price</dt>
                <dd>#:kendo.toString(UnitPrice, "c")#</dd>
                <dt>Units In Stock</dt>
                <dd>#:UnitsInStock#</dd>
                <dt>Discontinued</dt>
                <dd>#:Discontinued#</dd>
            </dl>
        </div>`,
            schemaModelFields: {
                ProductID: { editable: false, nullable: true },
                ProductName: 'ProductName',
                UnitPrice: { type: 'number' },
                Discontinued: { type: 'boolean' },
                UnitsInStock: { type: 'number' }
            }
        }
    },
    methods: {
        parameterMap (options, operation) {
            if (operation !== 'read' && options.models) {
                return {models: kendo.stringify(options.models)};
            }
        }
    }
})

In this article