This is a migrated thread and some comments may be shown as answers.

Scroll to RadDock (Lightweight Render)

4 Answers 59 Views
Dock
This is a migrated thread and some comments may be shown as answers.
Tarek
Top achievements
Rank 1
Tarek asked on 29 Dec 2013, 02:39 PM
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



4 Answers, 1 is accepted

Sort by
0
Danail Vasilev
Telerik team
answered on 02 Jan 2014, 12:09 PM
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.
0
Tarek
Top achievements
Rank 1
answered on 10 Jan 2014, 09:12 AM
This code works perfectly, but still set_collapsed(false) doesn't work

0
Accepted
Shinu
Top achievements
Rank 2
answered on 10 Jan 2014, 09:53 AM
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.
0
Tarek
Top achievements
Rank 1
answered on 13 Jan 2014, 09:09 AM
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
Tags
Dock
Asked by
Tarek
Top achievements
Rank 1
Answers by
Danail Vasilev
Telerik team
Tarek
Top achievements
Rank 1
Shinu
Top achievements
Rank 2
Share this question
or