Virtualization

Virtual scrolling is an alternative to paging and optimizes the Kendo UI Grid wrapper for Vue performance when it displays huge volumes of data.

To enable virtual scrolling in the native Vue Grid by Kendo UI, refer to the native Vue Grid by Kendo UI documentation.

To enable the virtualization, use the scrollable->virtual configuration option. As a result, the grid displays a vertical scrollbar for its content and renders only the number of items which are set through the pageSize property of its data source. When the user drags the scrollbar and exceeds the pageSize, the Kendo UI Data Grid wrapper for Vue makes automatic requests to retrieve and render the next set of rows. The virtual scrolling of the Grid works with both local and remote data.

The following example demonstrates how to apply virtual scrolling with local data.

<div id="vueapp" class="vue-app">
    <kendo-grid ref="grid"
                :data-source="localDataSource"
                :height="600"
                :scrollable-virtual="true"
                :editable="'inline'"
                :toolbar="['create']"
                :pageable-numeric="false"
                :pageable-previous-next="false"
                :pageable-messages-display="'Showing {2} data items'">
        <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: 100001
        }
    },
    methods: {
        generatedData: function() {
            var that = this;

            return new kendo.data.DataSource({
                pageSize: 20,
                transport: {
                    read: function(e) {
                        e.success(that.generatePeople(100000));
                    },
                    create: function(e) {
                        e.data.Id = that.nextId++;
                        e.success(e.data);
                    },
                    update: function(e) {
                        e.success(e.data);
                    },
                    destroy: function(e) {
                        e.success(e.data);
                    }
                },
                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 implement virtual 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/Orders'"
                      :page-size='100'
                      :server-paging="true"
                      :server-sorting="true"
                      :schema-model-fields="dsSchemaFields">
    </kendo-datasource>

    <kendo-grid :data-source-ref="'datasource1'"
                :height="543"
                :scrollable-virtual="true"
                :sortable="true">
        <kendo-grid-column :field="'OrderID'"
                           :title="'Order ID'"
                           :width="80"></kendo-grid-column>
        <kendo-grid-column :field="'ShipName'"
                           :title="'Ship Name'"
                           :width="200" ></kendo-grid-column>
        <kendo-grid-column :field="'Freight'"
                           :width="80"></kendo-grid-column>
        <kendo-grid-column :field="'OrderDate'"
                           :title="'Order Date'"
                           :format="'{0:MM/dd/yyyy}'"
                           :width="100"></kendo-grid-column>
        <kendo-grid-column :field="'ShipCity'"
                           :title="'Ship City'"
                           :width="120" ></kendo-grid-column>
    </kendo-grid>
</div>
Vue.use(DataSourceInstaller);
Vue.use(GridInstaller);

new Vue({
    el: '#vueapp',
    data () {
        return {
            dsSchemaFields: {
                OrderID: { type: "number" },
                Freight: { type: "number" },
                ShipName: { type: "string" },
                OrderDate: { type: "date" },
                ShipCity: { type: "string" }
            }
        }
    }
})

In this article