RadGrid for ASP.NET
Contents
Scrolling to the selected item Send comments on this topic.
Scrolling > How-to > Scrolling to the selected item

Glossary Item Box

If you have initially selected item in your scrollable grid, you may want to bring the focus on this item on initial load. This is easily attainable with only several lines of code:

  1. Subscribe to the PreRender event of the grid to select an item of your choice server side and rebind the control
  2. Hook the GridCreated event and find the selected grid row through the SelectedRows collection of the RadGridTable object
  3. Execute custom javascript logic which changes the position of the vertical scroll of the grid to scroll the selected item into view

The forthcoming code illustrates this approach in reality (note that the grid has paging turned on):


ASPX/ASCX Copy Code
<script type="text/javascript">
       function GridCreated()
       {
           //gets the main table scrollArea HTLM element  
           var scrollArea = document.getElementById(this.ClientID + "_GridData");  
           var row = this.MasterTableView.SelectedRows[0];
             
           //if the position of the selected row is below the viewable grid area  
           if((row.Control.offsetTop - scrollArea.scrollTop) + row.Control.offsetHeight + 20 > scrollArea.offsetHeight)  
           {  
               //scroll down to selected row  
               scrollArea.scrollTop = scrollArea.scrollTop + ((row.Control.offsetTop - scrollArea.scrollTop) + row.Control.offsetHeight - scrollArea.offsetHeight) + row.Control.offsetHeight;  
           }  
           //if the position of the the selected row is above the viewable grid area  
           else if((row.Control.offsetTop - scrollArea.scrollTop) < 0)  
           {  
               //scroll the selected row to the top  
               scrollArea.scrollTop = row.Control.offsetTop;  
           }  
       }
</script>
<rad:RadGrid ID="RadGrid1" DataSourceID="AccessDataSource1" AllowPaging="true" PageSize="25"
Skin="Web20" runat="server" GridLines="None" Width="95%">
  <MasterTableView Width="100%" />
               <ClientSettings>
                 <Scrolling AllowScroll="true" UseStaticHeaders="true" SaveScrollPosition="true" />
                 <ClientEvents OnGridCreated="GridCreated" />
                 <Selecting AllowRowSelect="true" />
               </ClientSettings>
  <PagerStyle Mode="NumericPages" />
</rad:RadGrid>
<br />
<asp:AccessDataSource ID="AccessDataSource1" DataFile="~/Grid/Data/Access/Nwind.mdb"
SelectCommand="SELECT CustomerID, CompanyName, ContactName, ContactTitle, Address, PostalCode FROM Customers"
runat="server" />

 

C# Copy Code
 private void RadGrid1_PreRender(object sender, System.EventArgs e)
 {
  RadGrid1.CurrentPageIndex = 2;
  RadGrid1.Rebind();
  RadGrid1.SelectedIndexes.Add(18);
 }
VB.NET Copy Code
Private Sub RadGrid1_PreRender(ByVal sender As Object, ByVal e As System.EventArgs) Handles RadGrid1.PreRender
  RadGrid1.CurrentPageIndex = 2
  RadGrid1.Rebind()
  RadGrid1.SelectedIndexes.Add(18)
End Sub 'RadGrid1_PreRender