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

Set the RaddockZones height based on resolution.

6 Answers 61 Views
Dock
This is a migrated thread and some comments may be shown as answers.
Ram
Top achievements
Rank 1
Ram asked on 28 Oct 2011, 02:47 PM
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.

6 Answers, 1 is accepted

Sort by
0
Accepted
Slav
Telerik team
answered on 01 Nov 2011, 03:39 PM
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
0
Ram
Top achievements
Rank 1
answered on 02 Nov 2011, 06:40 AM
Thanks very much.
It did work for me.
0
Ram
Top achievements
Rank 1
answered on 02 Nov 2011, 07:06 AM
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.

0
Slav
Telerik team
answered on 04 Nov 2011, 12:44 PM
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
0
Manish
Top achievements
Rank 1
answered on 21 Aug 2014, 05:41 AM
Hey Slav, Why this code is not working in chrome?
0
Slav
Telerik team
answered on 22 Aug 2014, 03:41 PM
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.

 
Tags
Dock
Asked by
Ram
Top achievements
Rank 1
Answers by
Slav
Telerik team
Ram
Top achievements
Rank 1
Manish
Top achievements
Rank 1
Share this question
or