@progress/kendo-dropdowns-react-wrapper/docs/dropdownlist/virtualization.md

Kendo UI DropDowns wrapper for React

---
title: Virtualization
page_title: Virtualization - DropDownList - Kendo UI Wrappers for React
description: "Show the virtualization features of the Kendo UI DropDownList wrapper for React which allow you to work with large datasets."
slug: virtualization_dropdownlist
position: 5
---

# Virtualization

Virtualization is useful for displaying large datasets.

Regardless of the dataset size, the UI virtualization technique uses a fixed amount of list items in the popup list of the component. When the list is scrolled, the DropDownList reuses the existing items to display the relevant data instead of creating new data.

The following example demonstrates how to set the minimum configuration of the DropDownList and the DataSource to enable the virtualization.

{% meta height:610 %}
```jsx-preview
class DropDownListContainer extends React.Component {
    constructor(props) {
        super(props);
        this.dataSource = new kendo.data.DataSource({
            type: "odata",
            transport: {
                read: "https://demos.telerik.com/kendo-ui/service/Northwind.svc/Orders"
            },
            pageSize: 80,
            serverPaging: true,
            serverFiltering: true,
        })
        this.dataTextField = "ShipName"
        this.dataValueField = "OrderID"
    }

    render() {
        return (
            <div className="row">
                <div className="col-xs-12 col-sm-6 example-col">
                   <DropDownList dataSource={this.dataSource}
                                dataTextField={this.dataTextField}
                                dataValueField={this.dataValueField}
                                virtual={{itemHeight:26}}
                                height= {520}/>
                </div>
            </div>
        );
    }
}
ReactDOM.render(
    <DropDownListContainer />,
    document.querySelector('my-app')
);
```
{% endmeta %}

## Known Limitations

- While virtualization can work with objects, it is not compatible with primitive values.
- The items in the virtualized list must have equal heights. To set the height of every single item, use the [`itemHeight`](http://docs.telerik.com/kendo-ui/api/javascript/ui/dropdownlist#configuration-virtual.itemHeight) option.
- The virtualization feature performs a complex pre-fetching of data and assumes that the state of the DataSource will not change without the "awareness" of the component. Manual data operations, such as `read`, `page`, `filter`, `add`, `remove`, and others, might lead to unexpected behavior of the component and are not supported.
- The server filtering feature filters only the source. To page and filter the dataset, use the virtualization of the DropDownList.

## Suggested Links

* [Kendo UI DropDownList for jQuery](https://docs.telerik.com/kendo-ui/controls/editors/dropdownlist/overview)
* [API Reference of the DropDownList Widget](https://docs.telerik.com/kendo-ui/api/javascript/ui/dropdownlist)