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


    RadControls version

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

    .NET version


    Visual Studio version


    programming language

    JavaScript/ASPX only

    browser support

    all browsers supported by RadControls


    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;  

    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();  
                    gridDataDiv.scrollTop = sender.get_value();  
        <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" 
                    <MasterTableView TableLayout="Fixed">  
                        <HeaderStyle Width="100px" /> 
                        <Scrolling AllowScroll="true" UseStaticHeaders="true" /> 
                <telerik:RadSlider ID="RadSlider1" Skin="Office2007" runat="server" OnClientValueChange="valueChange" 
                    Length="600" /> 
            <div style="float: left; padding-top: 21px;">  
                <telerik:RadSlider ID="RadSlider2" Skin="Office2007" runat="server" OnClientValueChange="valueChange" 
                    Orientation="Vertical" Length="300" /> 
        <asp:LinqDataSource ID="LinqDataSource1" runat="server" ContextTypeName="DataClassesDataContext" 

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