Scrolling Basics

The available scrolling modes of the Kendo UI Grid wrapper for Vue allow you to optimize its performance.

To configure the scrolling functionality of the native Vue Grid by Kendo UI, refer to the native Vue Grid by Kendo UI documentation.

Endless Scrolling

The endless scrolling functionality enables the Kendo UI Data Grid wrapper for Vue to display large amounts of data by appending additional pages of data on demand. The loading of new items happens when the scrollbar of the Grid 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 Grid 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, the Grid displays the new items.

The endless scrolling is compatible with the grouping, hierarchy, and editing features of the Grid.

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

<div id="vueapp" class="vue-app">
    <kendo-grid ref="grid"
                :data-source="localDataSource"
                :height="600"
                :groupable="true"
                :sortable="true"
                :scrollable-endless="true"
                :pageable-numeric="false"
                :pageable-previous-next="false"
                :pageable-messages-display="'Showing {2} data items'"
                :editable-mode="'inline'"
                :toolbar="['create']"
                v-on:save="onSave">
        <kendo-grid-column :field="'Id'"
                           :title="'ID'"
                           :width="110"></kendo-grid-column>
        <kendo-grid-column :field="'FirstName'"
                           :title="'First Name'"></kendo-grid-column>
        <kendo-grid-column :field="'LastName'"
                           :title="'last Name'"></kendo-grid-column>
        <kendo-grid-column :field="'City'"></kendo-grid-column>
        <kendo-grid-column :field="'Title'"></kendo-grid-column>
        <kendo-grid-column :command="['edit', 'destroy']"
                           :title="'&nbsp;'"
                           :width="200"></kendo-grid-column>
    </kendo-grid>
</div>
Vue.use(GridInstaller);

new Vue({
    el: '#vueapp',
    data () {
        return {
            localDataSource: this.generatedData(),
            nextId: 2000
        }
    },
    methods: {
        onSave: function(e) {
            this.nextId++;
            e.model.set("Id", this.nextId);
        },
        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" },
                            Title: { 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 titles = ["Accountant", "Vice President, Sales", "Sales Representative", "Technical Support", "Sales Manager", "Web Designer",
    "Software Developer", "Inside Sales Coordinator", "Chief Techical Officer", "Chief Execute Officer"];
            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)],
                    title = titles[Math.floor(Math.random() * titles.length)],
                    birthDate = birthDates[Math.floor(Math.random() * birthDates.length)],
                    age = now.getFullYear() - birthDate.getFullYear();

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

            return data;
        }
    }
})

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

<div id="vueapp" class="vue-app">
    <kendo-datasource ref="datasource1"
                      :type="'odata'"
                      :transport-read-url="'https://demos.telerik.com/kendo-ui/service/Northwind.svc/Products'"
                      :transport-read-data-type="'jsonp'"
                      :transport-update-url="'https://demos.telerik.com/kendo-ui/service/Products/Update'"
                      :transport-update-data-type="'jsonp'"
                      :transport-destroy-url="'https://demos.telerik.com/kendo-ui/service/Products/Destroy'"
                      :transport-destroy-data-type="'jsonp'"
                      :transport-create-url="'https://demos.telerik.com/kendo-ui/service/Products/Create'"
                      :transport-create-data-type="'jsonp'"
                      :transport-parameter-map="parameterMap"
                      :schema-model-id="'ProductID'"
                      :schema-model-fields="schemaModelFields"
                      :schema-data="schemaData"
                      :batch='true'
                      :page-size='20'
                      :server-paging="true"
                      :server-sorting="true">
    </kendo-datasource>

    <kendo-grid :height="550"
                :data-source-ref="'datasource1'"
                :sortable="true"
                :scrollable-endless="true"
                :pageable-numeric="false"
                :pageable-previous-next="false"
                :editable="'inline'"
                :toolbar="['create']">
        <kendo-grid-column :field="'ProductName'"></kendo-grid-column>
        <kendo-grid-column :field="'UnitPrice'"
                           :title="'Unit Price'"
                           :width="120"
                           :format="'{0:c}'"></kendo-grid-column>
        <kendo-grid-column :field="'UnitsInStock'"
                           :title="'Units In Stock'"
                           :width="120"></kendo-grid-column>
        <kendo-grid-column :field="'Discontinued'" :width="120"></kendo-grid-column>
        <kendo-grid-column :command="['edit', 'destroy']"
                           :title="'&nbsp;'"
                           :width="200"></kendo-grid-column>
    </kendo-grid>
</div>
Vue.use(GridInstaller);
Vue.use(DataSourceInstaller);

new Vue({
    el: '#vueapp',
    data () {
        return {
            schemaModelFields: {
                ProductID: { editable: false, nullable: true },
                ProductName: { validation: { required: true } },
                UnitPrice: { type: 'number', validation: { required: true, min: 1 } },
                Discontinued: { type: 'boolean' },
                UnitsInStock: { type: 'number', validation: { min: 0, required: true } }
            }
        }
    },
    methods: {
        parameterMap: function(options, operation) {
            if (operation !== 'read' && options.models) {
                return { models: kendo.stringify(options.models) }
            }
        },
        schemaData: function(response) {
            return response.d ? response.d.results: response;
        }
    }
})

In this article