Not able to resize splitter according to available height

2 posts, 0 answers
  1. Ira
    Ira avatar
    11 posts
    Member since:
    Dec 2010

    Posted 07 Sep 2011 Link to this post

    Hi...

    I want to set the splitter to take available height in a table. A table has 3 rows and in the last row, splitter is there. User can click on a link given in 2nd row to toggle the display of the first row. So if first row is set to display = 'none', the splitter should take available space i.e. its height should  increase. And if user sets the  display = 'block' for first row, then splitter's height should decrease. But in any case, window should not have scroll.

    My splitter is having panelbar in 1 of its pane. So if that pane is docked or undocked, splitter should always get proper height and no data should cut.

    My page is quite complex, so I was thinking that I am doing something wrong. So I tried creating smaller version of my actual page. In that page also I am not able to get expected result. 

    Here I am attaching html of the smaller page. 

    I would appreciate a very very quick response as I've already struggled for 3-4 days to get it work.

    aspx page.


    <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="PostedToTelerik.aspx.cs" Inherits="TelerikPlayGround.Splitter.PostedToTelerik" %>
    <%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %>
     
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
     
    <head id="Head1" runat="server">
        <title></title>
        <style type="css">
        html, body, form
        {
            height: 100%;
            margin: 0px;
            padding: 0px;
            overflow: hidden;
        }
        </style>
    </head>
    <body>
        <form id="form1" runat="server" >
        <asp:ScriptManager ID="ScriptManager" runat="server" />
        <telerik:RadScriptBlock ID="RadScriptBlock1" runat="server">
            <script type="text/javascript">
                function toggle()
                {
                    var d = document.getElementById("divHeader");
                    if (d)
                    {
                        if (d.style.display != 'none')
                        {
                            d.style.display = 'none';
                        }
                        else
                        {
                            d.style.display = 'block';
                        }
                    }
                }
            </script>
        </telerik:RadScriptBlock>
        <table id="tblMain" border="10" style="height:100%;width:100%;" >
            <tr >
                <td>
                    <div id="divHeader" style="display:block;">
                        header
                        <br />1
                        <br />2
                        <br />3
                        <br />4
                        <br />5
                        <br />6
                        <br />7
                        <br />8
                        <br />9
                        <br />10
                    </div>
                </td>
            </tr>
            <tr>
                <td>
                    <a href = "#" onclick="toggle()">
                        Toggle
                    </a>
                </td>
            </tr>
            <tr id="trSplitter" >
                <td id="tdSplitter" >
                    <telerik:RadSplitter ID="RadSplitter1" runat="server" Orientation="Horizontal" Skin="Office2007" Height="100%" Width="100%">
                        <telerik:RadPane ID="MainPane" runat="server" Scrolling="none">
                            <telerik:RadSplitter ID="NestedSplitter" runat="server" Skin="Office2007" LiveResize="true">
                                <telerik:RadPane ID="LeftPane" runat="server">
                                    <!-- Place the content of the pane here -->
                                    <telerik:RadSlidingZone ID="SlidingZone1" runat="server" Width="22" DockedPaneId="slidingPaneSearchPanels">
                                        <telerik:RadSlidingPane ID="slidingPaneSearchPanels" runat="server" Width="250" Title="SearchPanels"
                                            Font-Bold="true" Scrolling="None" DockOnOpen="false" EnableResize="false">
                                            <div style="padding-left: 0px; padding-top: 0px;">
                                                <telerik:RadPanelBar runat="server" ID="panelBarLeftSearchPanels" Height="100%" ExpandMode="MultipleExpandedItems"
                                                    Style="margin-right: 30px; overflow: hidden;" Skin="Office2007" >
                                                    <Items>
                                                        <telerik:RadPanelItem Text="1"></telerik:RadPanelItem>
                                                        <telerik:RadPanelItem Text="2"></telerik:RadPanelItem>
                                                        <telerik:RadPanelItem Text="3"></telerik:RadPanelItem>
                                                        <telerik:RadPanelItem Text="4"></telerik:RadPanelItem>
                                                    </Items>
                                                </telerik:RadPanelBar>
                                            </div>
                                        </telerik:RadSlidingPane>
                                    </telerik:RadSlidingZone>
                                </telerik:RadPane>
                                <telerik:RadSplitBar ID="VerticalSplitBar" runat="server" CollapseMode="Forward" />
                                <telerik:RadPane ID="ContentPane" runat="server">
                                    <!-- Place the content of the pane here -->
                                </telerik:RadPane>
                            </telerik:RadSplitter>
                        </telerik:RadPane>
                    </telerik:RadSplitter>
                </td>
            </tr>
        </table>
        </form>
    </body>
    </html>


  2. Dobromir
    Admin
    Dobromir avatar
    1633 posts

    Posted 08 Sep 2011 Link to this post

    Hi Ira,

    In order to configure RadSplitter to use percentage values for its Width and Height properties all its parents need to have set height.

    In the case the table, the table cells do get expanded to fill the table, but they do not have preset width and height and the splitter cannot calculate correctly its size. To achieve the required result I would suggest you to manually size the splitter according the the table cell's size, e.g.:
    <script type="text/javascript">
        function toggle()
        {
            var d = document.getElementById("divHeader");
            var splitter = $find("<%=RadSplitter1.ClientID %>");
     
            if (d) {
                if (d.style.display != 'none') {
                    d.style.display = 'none';
                }
                else {
                    d.style.display = 'block';
                }
            }
     
     
            resizeSplitter(splitter);
        }
     
        function resizeSplitter(splitter, shouldIncrease)
        {
            var wrapperTD = $get("tdSplitter");
     
            splitter.resize(wrapperTD.offsetWidth, wrapperTD.offsetHeight);
        }
     
        function OnClientLoaded(splitter, args)
        {
            resizeSplitter(splitter);
        }
    </script>

    I hope this helps.

    All the best,
    Dobromir
    the Telerik team

    Thank you for being the most amazing .NET community! Your unfailing support is what helps us charge forward! We'd appreciate your vote for Telerik in this year's DevProConnections Awards. We are competing in mind-blowing 20 categories and every vote counts! VOTE for Telerik NOW >>

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