In this blog entry, we look at the ShieldUI Scrolling mechanism and options.
The
scrolling functionality is controlled by the scrolling property of the
grid. When the scrolling is enabled and the height property is set the
vertical scrollbar will be shown. If the columns width is bigger than
the grid, then a vertical scrollbar is shown:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
| $("#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 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.
1
2
3
4
5
6
7
8
9
10
11
12
13
| $("#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
Няма коментари:
Публикуване на коментар