Smartscroller control for Datagrid

Another thing I suggest to do with your Datagrid is to keep the scrolling position after every postback.
A lot of solutions exist but I found this one very 'clean'.

It's a Control from and you just need to write your code like this:

<asp:datagrid id="dgExample" runat="server" HorizontalAlign="Center" CellPadding="3" AutoGenerateColumns="False">
       <SelectedItemStyle BackColor="#FFFFC0"></SelectedItemStyle>
       <AlternatingItemStyle BackColor="Gainsboro"></AlternatingItemStyle>
       <ItemStyle ForeColor="#336699" BackColor="WhiteSmoke"></ItemStyle>
       <HeaderStyle ForeColor="White" BackColor="Black"></HeaderStyle>
       <Columns>
        <asp:BoundColumn Visible="False" DataField="CustomerID" ReadOnly="True"></asp:BoundColumn>
        <asp:ButtonColumn Text="Select" CommandName="Select"></asp:ButtonColumn>
        <asp:BoundColumn DataField="CompanyName" HeaderText="Company"></asp:BoundColumn>
        <asp:BoundColumn DataField="ContactName" HeaderText="Contact"></asp:BoundColumn>
        <asp:BoundColumn DataField="ContactTitle" HeaderText="Title"></asp:BoundColumn>
        <asp:TemplateColumn>
         <ItemTemplate>
          <asp:LinkButton id="LinkButton1" runat="server" CommandName="View" Text="Select" CausesValidation="false">View</asp:LinkButton>
         </ItemTemplate>
        </asp:TemplateColumn>
       </Columns>
      </asp:datagrid><BR>

<!-- SmartScroller is placed HERE -->
  <cc1:SmartScroller id="SmartScroller1" runat="server">

This is the explanantion found in their introduction :

Many users of the SmartScroller have asked us to add a feature to maintain the scroll position of some scrollable object on their pages.  By wrapping a DataGrid in a <div id="div1" style="overflow:auto;height:100px"></div> tag, a long DataGrid can be displayed on a page more neatly.  The problem is that the scroll position of the div was lost at every postback.  Now with SmartScroller version 1.2, simply set the TargetObject property to the ID of the object (div1 in this case) and that's it.

You can download the Control here.

Well just as a reminder check my previous post to have a better wrapping experience with <div style="overflow"> ;-)

 

No Comments