Scroll to RadDock (Lightweight Render)

[Tarek]

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

[Danail Vasilev]

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

[Tarek]

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

[Shinu]

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.

[Tarek]

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