Set the RaddockZones height based on resolution.

7 posts, 1 answers
  1. Ram
    Ram avatar
    97 posts
    Member since:
    Jun 2011

    Posted 28 Oct 2011 Link to this post

    Hi
    I have been using radcontrols in my application.
    I'm using the raddcoks in my application.
    I have two dockzones and adding 3 docks per each zone.
    I have requirement where I need  to set the zones height based on resolution(system) at clinetside through javascript.
    I tried like Height="100%" but zones not considering the height with %.

    <telerik:RadDockLayout runat="server" ID="RadDockLayout1"
                    OnSaveDockLayout="RadDockLayout1_SaveDockLayout" EnableViewState="false">
                    <div id="mainContainer" style="width: 100%; float:left; height:100%">
                        <div style="width:100%;">
                            <asp:Table ID="Table1" runat="server" Width="100%">
                            <asp:TableRow>
                            <asp:TableCell Width="50%" Height="95%">
                            <telerik:RadDockZone ID="RadDockZone1" runat="server" CssClass="zone" Height="540px" BorderColor="#d7d7d7">
                                        </telerik:RadDockZone>
                            </asp:TableCell>
                            <asp:TableCell  Width="50%" Height="95%">
                            <telerik:RadDockZone ID="RadDockZone2" runat="server" CssClass="zone" Height="540px"  BorderColor="#d7d7d7">
                                        </telerik:RadDockZone>
                            </asp:TableCell>
                            </asp:TableRow>
                            </asp:Table>
                        </div>
                           
                    </div>
                </telerik:RadDockLayout>
    Please help me as early as possible.
  2. Answer
    Slav
    Admin
    Slav avatar
    1356 posts

    Posted 01 Nov 2011 Link to this post

    Hi Ram,

    You can use the client method getViewPortSize of the telerik client static library in order to get the size of the viewport and then to use the returned height for modifying the size of the RadDockZones accordingly. Below you can find an example, implementing the suggested approach:
    <asp:ScriptManager ID="Scriptmanager1" runat="server" />
        <script type="text/javascript">
            function pageLoad() {
                var viewPortSize = $telerik.getViewPortSize();
                var dockZone = GetRadDockZone();
                dockZone.get_element().style.height = viewPortSize.height + "px";
            }
     
            function GetRadDockZone() {
                return $find("<%=RadDockZone1.ClientID %>");
            }
    </script>


    Regards,
    Slav
    the Telerik team
    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 their blog feed now
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Ram
    Ram avatar
    97 posts
    Member since:
    Jun 2011

    Posted 02 Nov 2011 Link to this post

    Thanks very much.
    It did work for me.
  5. Ram
    Ram avatar
    97 posts
    Member since:
    Jun 2011

    Posted 02 Nov 2011 Link to this post

    If I set as
     dockZone1.get_element().style.height ="500px";
    its taking height correctly.
    but if give like
    dockZone1.get_element().style.height = viewPortSize.height + "10px";
    Its taking more height than what I gave.

  6. Slav
    Admin
    Slav avatar
    1356 posts

    Posted 04 Nov 2011 Link to this post

    Hi Ram,

    Please note that in the line, displayed below you are adding a string to the height of the view port and as a result the height is converted to string as well. This will lead to concatenation of the two strings, so if the value of viewPortSize.height is 862, for example, the result from the operation below will be 86210px.
    dockZone1.get_element().style.height = viewPortSize.height + "10px";

    In case you want to add 10 pixels to the height of the view port, please use the following approach instead:
    ockZone.get_element().style.height = (viewPortSize.height + 10) + "px";

    This way the size will be increased before converting it to string and the result will be 872px.

    Kind regards,
    Slav
    the Telerik team
    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 their blog feed now
  7. Manish
    Manish avatar
    1 posts
    Member since:
    May 2014

    Posted 21 Aug 2014 Link to this post

    Hey Slav, Why this code is not working in chrome?
  8. Slav
    Admin
    Slav avatar
    1356 posts

    Posted 22 Aug 2014 Link to this post

    Hello Manish,

    The script from the posts below should be resizing the RadDockZone according to the height of the browser window in Chrome as well. Could you please describe in detail your setup, how is the resizing script applied and what is the actual problem you have encountered so that I can help you resolve it?

    Regards,
    Slav
    Telerik
     

    Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

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