New to Kendo UI for jQuery? Start a free 30-day trial

Scrollable

configuration

If set to true the grid will display a scrollbar when the total row height (or width) exceeds the grid height (or width). By default scrolling is enabled.

Can be set to a JavaScript object which represents the scrolling configuration.

scrollable

Boolean|Object

Default: true

<div id="grid"></div>
<script>
$("#grid").kendoGrid({
  columns: [
    { field: "name" },
    { field: "age" }
  ],
  dataSource: [
    { name: "Jane Doe", age: 30 },
    { name: "John Doe", age: 33 }
  ],
  scrollable: false
});
</script>

scrollable.endless

Boolean

If set to true the grid will always display a single page of data. Scrolling to the end will load more items untill all items are displayed.

Check Endless scrolling of local data and Endless scrolling of remote data for live demos.

Default: false

<div id="grid"></div>
<script>
  $("#grid").kendoGrid({
    columns: [{ field: "ProductName" }, { field: "UnitPrice" }],
    dataSource: {
      transport: {
        read: "https://demos.telerik.com/service/v2/core/Products",
      },
      pageSize: 20,
    },
    height: 400,
    scrollable: {
      endless: true,
    },
  });
</script>

Configures the grid virtualization settings. If set to true the grid will enable row virtualization and display a single page of data. Scrolling would just change the data which is currently displayed.

Can also be set to the following string values:

"rows" - enables virtualization of rows.
"columns" - enables virtualization of columns.
"rows, columns" - enables virtualization of both rows and columns.

For columns virtualization to work, define widths for the columns. For additional information about the configuration of this functionality, visit the Virtual Scrolling documentation article.

Check Virtualization of local data, Virtualization of remote data and Colums Virtualization for live demos.

Default: false

<div id="grid"></div>
<script>
$("#grid").kendoGrid({
    loaderType:"skeleton",
    dataSource: {
        type: "odata-v4",
        serverPaging: true,
        serverSorting: true,
        pageSize: 100,
        transport: {
            read: "https://demos.telerik.com/service/v2/odata/Orders"
        }
    },
    height: 543,
    scrollable: {
        virtual: true
    },
    sortable: true,
    columns: [
        { field: "OrderID", title: "Order ID", width: 110 },
        { field: "CustomerID", title: "Customer ID", width: 130},
        { field: "ShipName", title: "Ship Name", width: 280 },
        { field: "ShipAddress", title: "Ship Address" },
        { field: "ShipCity", title: "Ship City", width: 160 },
        { field: "ShipCountry", title: "Ship Country", width: 160 }
    ]
});
</script>

Scrollable

scrollable

scrollable.endless

scrollable.virtual