Very often, when constructing a grid, there are design limitations regarding the size of the
grid. In such cases you will need to enable the client-side grid scrolling option in order to
fit it in the allowed space.
In order to do that you need to set the
AllowScroll property to
true. By default
its value is
false. The
ScrollHeight property specifies the height value beyond
which the scrolling will be turned on. The default value is
300px.
Scrolling is fully supported client side and can be configured with the following options:
-
Static headers - this option will set the header so that it does not scroll with the grid
and is always visible at the top. Set
UseStaticHeaders property to
true in order to
enable it (the default value is
false).
-
Show/hide header and footer - in case you need the data only, you can hide the header and footer
-
Pager position - the possible options are Top, Bottom, TopAndBottom
The second and third options are also available without the usage of the scrolling mechanism of
Telerik RadGrid.
In order to display horizontal scroll for navigation, you need to make sure that the
total width of the
columns (either auto-generated or declaratively set) exceeds
the width of the grid (as demonstrated in
the online demo itself). Moreover, to render merely the horizontal scroll and avoid the appearance
of the vertical scroll, make sure that the height of the records in the grid
does not exceed
the
ClientSettings -> Scrolling -> ScrollHeight scroll setting.
To restrict the horizontal bar from being rendered, verify that:
- the width for the MasterTableView is set to 99% if auto-generated columns are used
- the total width of the declaratively set columns is smaller than the width of the grid itself
Note: When grid with scrolling enabled is wrapped inside a table cell (under IE only) you may
need to set the layout of the corresponding table to fixed to avoid unwanted stretching of the scrolling
area:
<table style="table-layout:fixed;">
grid definition
</table>
This is due to the specific IE box model.
More info about the scrolling feature you can find in the
Scrolling section from the grid documentation:
Scrolling