RadGrid scrolling through RadSlider

Thread is closed for posting
1 posts, 0 answers
  1. Telerik Admin
    Telerik Admin avatar
    1679 posts
    Member since:
    Oct 2004

    Posted 05 Jun 2008 Link to this post

    Requirements

    RadControls version

     Telerik.Web.UI v2008.1 515 (Q1, SP1)

    .NET version

    .Net3.5

    Visual Studio version

    2008

    programming language

    JavaScript/ASPX only

    browser support

    all browsers supported by RadControls


     
  2. PROJECT DESCRIPTION

    The project demonstrates an integration of RadGrid and RadSlider. Grid scrolling functionality is implemented through both horizontal and vertical sliders. An important CSS rule is applied to hide the default Grid scroll bars:

        <style type="text/css">  
            .Grid div  
            {  
                overflow: hidden !important;  
            }         
        </style> 

    RadSlider's OnClientValueChange event handler controls the Grid data div scrollTop/scrollLeft properties. The ASPX looks like this:

        <script type="text/javascript">  
            function pageLoad(sender, args)  
            {  
                $find("<%= RadSlider1.ClientID %>").set_maximumValue($find("<%= RadGrid1.ClientID %>")._gridDataDiv.scrollWidth);  
                $find("<%= RadSlider2.ClientID %>").set_maximumValue($find("<%= RadGrid1.ClientID %>")._gridDataDiv.scrollHeight);  
            }  
          
            function valueChange(sender, args)  
            {  
                var gridDataDiv = $find("<%= RadGrid1.ClientID %>")._gridDataDiv;  
                if(sender.get_id() == "<%= RadSlider1.ClientID %>")  
                {  
                    gridDataDiv.scrollLeft = sender.get_value();  
                }  
                else  
                {  
                    gridDataDiv.scrollTop = sender.get_value();  
                }  
            }  
        </script>      
        <asp:ScriptManager ID="ScriptManager" runat="server" /> 
        <div style="float: left; background-color: #7698c5; border: 1px solid ThreeDShadow;">  
            <div style="float: left;">  
                <telerik:RadGrid ID="RadGrid1" Width="600px" Skin="Office2007" CssClass="Grid" DataSourceID="LinqDataSource1" 
                    runat="server">  
                    <MasterTableView TableLayout="Fixed">  
                        <HeaderStyle Width="100px" /> 
                    </MasterTableView> 
                    <ClientSettings> 
                        <Scrolling AllowScroll="true" UseStaticHeaders="true" /> 
                    </ClientSettings> 
                </telerik:RadGrid> 
                <telerik:RadSlider ID="RadSlider1" Skin="Office2007" runat="server" OnClientValueChange="valueChange" 
                    Length="600" /> 
            </div> 
            <div style="float: left; padding-top: 21px;">  
                <telerik:RadSlider ID="RadSlider2" Skin="Office2007" runat="server" OnClientValueChange="valueChange" 
                    Orientation="Vertical" Length="300" /> 
            </div> 
        </div> 
        <asp:LinqDataSource ID="LinqDataSource1" runat="server" ContextTypeName="DataClassesDataContext" 
            TableName="Customers">  
        </asp:LinqDataSource> 

    A fully functional project is attached as well.
  • Back to Top