[Solved] Set the RaddockZones height based on resolution.

[Ram]

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.

[Slav]

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

[Ram]

Thanks very much.
It did work for me.

[Ram]

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.

[Slav]

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

[Manish]

Hey Slav, Why this code is not working in chrome?

[Slav]

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