Telerik UI for Windows 8 HTML

In most scenarios, the space you will have available for displaying RadGrid records will not be enough to accommodate all of them at the same time. In order to view RadGrid's entire data without the need of an app scrollbar, you can enable vertical scrolling in the grid itself.

Scrolling Modes

Vertical scrolling is enabled by default in RadGrid. Disabling it, or changing the scrolling mode is done using a single property— scrollable. It accepts the following values:

  • enabled: The default value. When set, all grid rows are loaded and a scrollbar appears to navigate through them. Note that, to be scrollable, RadGrid needs to have a height set.

  • none: Scrolling is disabled and RadGrid is as high as the total sum of its rows height plus the header height (plus group headers/footers height if available).

  • virtual: Enables UI virtualization of data. Loads only the items needed for the currently visible position of the scrollable area. Perfect for scenarios where you need to visualize large sets of data in tabular form.

In the example below, you can see a definition of a RadGrid with scrolling enabled and specific width set.

Scrollable RadGrid Copy imageCopy
<div id="scrollableGrid" data-win-control="Telerik.UI.RadGrid" data-win-options="{
    dataSource: {
        group: {field: 'CategoryID'}
    groupable: 'enabled',
    columns: [
        { field: 'ID', title: 'First Name' },
        { field: 'Name', title: 'Last Name' },
        { field: 'Price', title: 'Position' }
    scrollable: 'enabled',
    height: 320