Scroll to RadDock (Lightweight Render)

5 posts, 1 answers
  1. Tarek
    Tarek avatar
    23 posts
    Member since:
    Mar 2013

    Posted 29 Dec 2013 Link to this post

    When I scroll to a raddock from javascript the dock is collapsed and can't be expanded.
    I tried all these functions (window.location.href, scroll(" "), $(" ").scroll())
    but the problem resist only with Lightweight render.
    The only solution is <a  href="#Dock_ID" > but I really need it as javascript command because it's a general function not static ID's in <a> tags



  2. Danail Vasilev
    Admin
    Danail Vasilev avatar
    1492 posts

    Posted 02 Jan 2014 Link to this post

    Hello Tarek,

    If you want to scroll to a particular RadDock you can get its wrapper element and use the JavaScript scrollIntoView() method. For example:
    JavaScript:
    <telerik:RadCodeBlock ID="RadCodeBlock1" runat="server">
        <script>
            function OnClientClicked() {
                var dockElement = $find("<%=RadDock2.ClientID%>").get_element();
                dockElement.scrollIntoView();
            }
        </script>
    </telerik:RadCodeBlock>
    ASPX:
    <telerik:RadDockZone ID="RadDockZone1" runat="server" Height="300px" RenderMode="Lightweight">
        <telerik:RadDock ID="RadDock1" runat="server">
            <ContentTemplate>
                <div style="height: 300px; border: 1px solid green;"></div>
            </ContentTemplate>
        </telerik:RadDock>
        <telerik:RadDock ID="RadDock2" runat="server">
            <ContentTemplate>
                <div style="height: 300px; border: 1px solid green;"></div>
            </ContentTemplate>
        </telerik:RadDock>
    </telerik:RadDockZone>
    <telerik:RadButton ID="RadButton1" runat="server" AutoPostBack="false" OnClientClicked="OnClientClicked" Text="ScrollDock2" />

    You can also find the full VS example in the attached archive as well as a short video record that illustrates the above JavaScript scrolling works properly on my side with both render modes of RadDock - Classic and Lightweight.

    If the above information, however, is not helpful could you please try to reproduce the issue with the attached VS example and then tell us what changes you have made, so that I can make an investigation locally?

    Regards,
    Danail Vasilev
    Telerik
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to the blog feed now.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Tarek
    Tarek avatar
    23 posts
    Member since:
    Mar 2013

    Posted 10 Jan 2014 Link to this post

    This code works perfectly, but still set_collapsed(false) doesn't work

  5. Answer
    Shinu
    Shinu avatar
    17764 posts
    Member since:
    Mar 2007

    Posted 10 Jan 2014 Link to this post

    Hi Tarek,

    Please have a look into the following code snippet to expand the RadDock. Here I am expanding the 'RadDock2' on 'OnClientClicked' event of 'RadButton1'.

    JavaScript:
    <script type="text/javascript">
        function OnClientClicked() {
            var dockElement = $find("<%=RadDock2.ClientID%>").get_element();
            dockElement.scrollIntoView();
            //expand the RadDock2
            dockElement.control.set_collapsed(false);
        }
    </script>

    Thanks,
    Shinu.
  6. Tarek
    Tarek avatar
    23 posts
    Member since:
    Mar 2013

    Posted 13 Jan 2014 Link to this post

    this code shoud be completed with this test :
    if (dockElement.control.get_collapsed())
         dockElement.control.set_collapsed(false);

    because if the dock was initially expanded it will freeze.

    Thank you
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017