jQuery Grid Scrolling

The scrolling functionality is controlled by the scrolling property of the grid. When the scrolling is enabled and height property is set the vertical scrollbar will be shown. If the columns width are bigger than the grid, then a vertical scrollbar is shown:

$("#grid").shieldGrid({
    dataSource: {
        data: [
            { ID: 1, name: "name1" },
            { ID: 2, name: "name2" },
            { ID: 3, name: "name3" },
            { ID: 4, name: "name4" },
            { ID: 5, name: "name5" },
            { ID: 6, name: "name6" },
            { ID: 7, name: "name7" },
            { ID: 8, name: "name8" },
            { ID: 9, name: "name9" },
            { ID: 10, name: "name10" }
        ]
    },
    scrolling:true,
    height:"200px",
    columns: [
        { field: "ID" },
        { field: "name" }
    ]
});     

You can see scrolling in action in the grid scrolling demo.
The grid control is optimized for showing large data. You can load without problem 1M records into it. The following example: One million records shows that.

The other optimization in the grid widget are the virtualization techniques. Virtualization is controlled by the scrolling.virtual property which by default is false. When the virtualization is enabled the grid takes only portion of the data and loads it when the user scrolls.

$("#grid").shieldGrid({
    dataSource: {
        data: largeData
    },
    scrolling: {
        virtual: true
    },
    columns: [
        { field: "ID" },
        { field: "name" }
    ]
});
 

An Example of virtual scrolling you can find on the following example: virtual scrolling