In several occasions you may want to reduce the records displayed in Telerik RadGrid (either applying filtering criteria or changing the PageSize dynamically at some stage of the lifecycle). The grid will auto-resize its content when smaller amount of data is rendered except when you enable scrolling mode for the control.
However, only a few lines of javascript code are required to support the same auto-sizing behavior with scrolling enabled. What you need to do is hook the GridCreated event and check whether the table height is less than the scroll area height. If so, modify explicitly the scroll area height dimension to match the table settings.
Below you will find a sample implementation which demonstrates these conventions in a real-life scenario:
| ASPX/ASCX |
 Copy Code |
|
<script type="text/javascript">
function GridCreated()
{
var scrollArea = document.getElementById(this.ClientID + "_GridData");
var dataHeight = this.MasterTableView.Control.clientHeight;
if(dataHeight < 350)
{
scrollArea.style.height = dataHeight + "px";
}
}
</script>
<rad:RadGrid ID="RadGrid1" runat="server" DataSourceID="gridSource" GridLines="None"
Skin="Orange" AllowPaging="true" PageSize="25" AllowFilteringByColumn="true">
<MasterTableView AutoGenerateColumns="False" DataSourceID="gridSource" Width="99%">
<Columns>
<rad:GridBoundColumn DataField="ProductName" HeaderText="ProductName" SortExpression="ProductName"
UniqueName= "ProductName">
</rad:GridBoundColumn>
<rad:GridBoundColumn DataField="QuantityPerUnit" HeaderText="QuantityPerUnit" SortExpression="QuantityPerUnit"
UniqueName= "QuantityPerUnit">
</rad:GridBoundColumn>
<rad:GridBoundColumn DataField="UnitPrice" DataType="System.Decimal" HeaderText="UnitPrice"
SortExpression= "UnitPrice" UniqueName="UnitPrice">
</rad:GridBoundColumn>
<rad:GridBoundColumn DataField="UnitsInStock" DataType="System.Int16" HeaderText="UnitsInStock"
SortExpression= "UnitsInStock" UniqueName="UnitsInStock">
</rad:GridBoundColumn>
</Columns>
</MasterTableView>
<ClientSettings>
<Scrolling AllowScroll="True" UseStaticHeaders="True" ScrollHeight="350px" />
<ClientEvents OnGridCreated="GridCreated" />
</ClientSettings>
<PagerStyle Mode="NextPrevNumericAndAdvanced" />
</rad:RadGrid>
<br/>
<asp:AccessDataSource ID="gridSource" runat="server" DataFile="~/Grid/Data/Access/Nwind.mdb"
SelectCommand="SELECT [ProductName], [QuantityPerUnit], [UnitPrice], [UnitsInStock] FROM [Products]">
</asp:AccessDataSource> |