Virtualization

Virtual scrolling provides an alternative to paging and is useful for displaying large sets of data.

The virtualization functionality uses a fixed amount of list items in the pop-up list of the component. While the user is scrolling the pop-up list, the DropDownList requests and displays only the visible items.

To enable virtualization, configure onPageChange event and the composite virtual property which contains the following fields:

  • total—Represents the number of records.
  • skip—Represents the start of the sub-set of data which is loaded in the DropDownList.
  • pageSize—Indicates the size of the sub-set of data.
  • onPageChange—Provides the data for each page through the onPageChange event handler.
  • In order for the virtualization to work properly, the items in the popup list must have the same height. If the content of an item does not fit in a single row, the height of this item will be different from the height of the other items.
  • You also need to make sure that the pageSize value is at least equal to the number of the visible pop-up items plus two.

Basic Configuration

The following example demonstrates how to set the virtualization of the DropDownList.

import React from 'react';
import ReactDOM from 'react-dom';
import { DropDownList } from '@progress/kendo-react-dropdowns';

const total = 5000;
const pageSize = 12;
const allData = [];

for (let i = 0; i < total; i++) {
    allData.push({ id: i, text: 'Item ' + i });
}

class AppComponent extends React.Component {
    state = {
        skip: 0,
        subsetData: allData.slice(0, pageSize)
    };

    pageChange = (event) => {
        const skip = event.page.skip;
        const take = event.page.take;
        const newSubsetData = allData.slice(skip, skip + take);

        this.setState({
            subsetData: newSubsetData,
            skip: skip
        });
    }

    render() {
        return (
            <DropDownList
                data={this.state.subsetData}
                textField="text"
                dataItemKey="id"
                virtual={{
                    total: total,
                    pageSize: pageSize,
                    skip: this.state.skip
                }}
                onPageChange={this.pageChange}
                popupSettings={{
                    height: '250px'
                }}
            />
        );
    }
}

ReactDOM.render(
    <AppComponent />,
    document.querySelector('my-app')
);

Virtualization with Filtering

If you use virtualization in your project alongside filtering, scrolling will be reset every time the value of the filter input is changed.

import React from 'react';
import ReactDOM from 'react-dom';
import { DropDownList } from '@progress/kendo-react-dropdowns';
import { filterBy } from '@progress/kendo-data-query';

const total = 5000;
const pageSize = 11;
const allData = [];

for (let i = 0; i < total; i++) {
    allData.push({ id: i, text: 'Item ' + i });
}

class AppComponent extends React.Component {
    filteredData = allData.slice();
    state = {
        skip: 0,
        total: total,
        subsetData: allData.slice(0, pageSize)
    };

    onFilterChange = (event) => {
        this.filteredData = filterBy(allData.slice(), event.filter);

        const data = this.filteredData.slice(0, pageSize);

        this.setState({
            subsetData: data,
            skip: 0,
            total: this.filteredData.length
        });
    }

    pageChange = (event) => {
        const skip = event.page.skip;
        const take = event.page.take;
        const newSubsetData = this.filteredData.slice(skip, skip + take);

        this.setState({
            subsetData: newSubsetData,
            skip: skip
        });
    }

    render() {
        return (
            <DropDownList
                data={this.state.subsetData}
                dataItemKey="id"
                textField="text"
                virtual={{
                    total: this.state.total,
                    pageSize: pageSize,
                    skip: this.state.skip
                }}
                onPageChange={this.pageChange}
                filterable={true}
                onFilterChange={this.onFilterChange}
                popupSettings={{
                    height: '210px'
                }}
            />
        );
    }
}

ReactDOM.render(
    <AppComponent />,
    document.querySelector('my-app')
);
 /