Splitter inside of a RadPanelBar not filling height 100%

8 posts, 1 answers
  1. Kevin
    Kevin avatar
    83 posts
    Member since:
    Sep 2008

    Posted 07 Apr 2010 Link to this post

    hi guys,
    i'm having issue trying to get my splitter to fill 100% of the height of my RadPanelBar item. I'm currently on Q1 2010, basically i've got a CHAT style bar down the side with a splitter inside the RadPanelItem, its got the chat item in the top RadPane and the bottom RadPane is of fixed height (this is where users will enter their comments). but the top pane should stretch to fill whatever space is avalible to it.

    See below for my code, the two problem splitters are ChatSplitter and VotingSplitter. any help would be great.

    Also please see attached image to see what i mean!

    <%@ Page Language="C#" AutoEventWireup="true" Inherits="BusinessPort.WebUI.DataViewers.TaskViewer" 
        CodeBehind="TaskViewer.aspx.cs" %> 
     
    <%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %> 
    <html xmlns="http://www.w3.org/1999/xhtml"
    <head runat="server"
        <title>Agility User Suite - Task Viewer</title> 
        <link href="../../BusinessPort.css" type="text/css" rel="stylesheet" /> 
        <style type="text/css"
            html, body, form 
            { 
                margin: 0px; 
                padding: 0px; 
                height: 100%; 
            } 
            chatPanelStyle 
            { 
                vertical-align: top; 
            } 
        </style> 
    </head> 
    <body id="uiTaskPaneBody"
        <div id="ParentDivElement" style="height: 100%;"
            <form id="taskViewerForm" runat="server"
            <asp:ScriptManager ID="ScriptManager1" runat="server" /> 
            <telerik:RadAjaxManager ID="RadAjaxManager1" runat="server" OnAjaxRequest="RefreshPage" /> 
            <telerik:RadCodeBlock runat="server"
     
                <script type="text/javascript"
     
            function openWin(id) { 
                var oWnd = radopen("AuthorisersEdit/AuthorisersEditControl.aspx?DetailsID=" + id, "RadWindow1"); 
            } 
     
            function radWindowCallbackEvent()  
            { 
                //call AJAX event here to refresh chat... 
                var ajaxManager = <%= RadAjaxManager1.ClientID %>
                 
                var arguments = ''
             
                ajaxManager.ajaxRequest(arguments); 
            } 
         
            function EnableProceedComment() 
            { 
                var commentBox = document.getElementById('RadPanelBar1$i1$i0$uiChatComment'); 
                  
                var disableProceed = (commentBox.value.trim() == ""); 
                 
                document.getElementById("RadPanelBar1_i1_i0_sendMessage").disabled = disableProceed
            } 
             
            function EnableProceed() 
            { 
                var currentDecision = document.getElementById("uiUsersCurrentDecision").value; 
                 
                var commentBox = document.getElementById('RadPanelBar1$i2$i0$uiComment'); 
                 
                var disableProceed = (commentBox.value.trim() == ""); 
                 
     
                if(!disableProceed) 
                { 
                    if(currentDecision != "Fail") 
                    {            
                        document.getElementById("RadPanelBar1_i2_i0_uiFailRadioButton").disabled = false
                    } 
                    else 
                    { 
                        document.getElementById("RadPanelBar1_i2_i0_uiFailRadioButton").disabled = true
                    } 
                } 
                else 
                { 
                    document.getElementById("RadPanelBar1_i2_i0_uiFailRadioButton").disabled = true
                } 
            } 
             
            function scrollPositionBottom(sender, args) 
            { 
                var pane = sender.getPaneById('RadPanelBar1_i1_i0_uiChatPaneRadPane');   
                var scrollHeight = pane.getContentElement().scrollHeight; 
                pane.setScrollPos(0, scrollHeight - pane.get_height());  
            } 
                </script> 
     
            </telerik:RadCodeBlock> 
            <telerik:RadSplitter ID="MainSplitter" runat="server" Height="100%" Width="100%" 
                Orientation="Vertical" EnableEmbeddedSkins="false" PanesBorderSize="0" BorderSize="0" 
                VisibleDuringInit="false" ResizeWithParentPane="true"
                <telerik:RadPane ID="TopPane" runat="server" MinWidth="400" Width="400" MaxWidth="400" 
                    Scrolling="none" Height="100%"
                    <telerik:RadAjaxPanel ID="RadAjaxPanel1" runat="server" Height="100%" Width="100" 
                        RenderMode="Inline"
                        <telerik:RadSplitter ID="RadSplitter1" runat="server" Height="100%" Width="100%" 
                            Orientation="Horizontal" EnableEmbeddedSkins="false" PanesBorderSize="0" BorderSize="0" 
                            VisibleDuringInit="false" ResizeWithParentPane="true"
                            <telerik:RadPane ID="RadPane1" runat="server" MinWidth="400" Width="400" MaxWidth="400" 
                                Scrolling="none" Height="46"
                                <asp:PlaceHolder ID="uiVotingSummaryTable" runat="server" /> 
                                <table style="width: 100%;" cellpadding="0" cellspacing="0"
                                    <tr> 
                                        <td style="width: 150px;"
                                            Your Vote : 
                                        </td> 
                                        <td> 
                                            <asp:Label ID="uiMyCurrentDecision" runat="server"></asp:Label> 
                                        </td> 
                                    </tr> 
                                    <tr> 
                                        <td style="width: 150px;"
                                            Document Status : 
                                        </td> 
                                        <td> 
                                            <asp:Label ID="uiDocumentsCurrentDescion" runat="server"></asp:Label> 
                                        </td> 
                                    </tr> 
                                </table> 
                            </telerik:RadPane> 
                            <telerik:RadSplitBar ID="Radsplitbar1" runat="server" CollapseMode="None" EnableResize="false" 
                                Visible="false" /> 
                            <telerik:RadPane ID="RadPane2" runat="server" MinWidth="400" Width="400" MaxWidth="400" 
                                Scrolling="none" Height="100%"
                                <asp:HiddenField ID="uiUsersCurrentDecision" runat="server" /> 
                                <telerik:RadPanelBar ID="RadPanelBar1" runat="server" Skin="Outlook" Width="100%" 
                                    Height="100%" ExpandMode="FullExpandedItem" CssClass="TaskViewerText PanelBarTitleText"
                                    <Items> 
                                        <telerik:RadPanelItem Text="Summary" Font-Bold="true" Height="32px" Expanded="true" 
                                            runat="server"
                                            <Items> 
                                                <telerik:RadPanelItem id="uiSummaryPanel" runat="server"
                                                    <ItemTemplate> 
                                                        <asp:Panel ID="Panel1" runat="server"
                                                            <div style="margin-left: 3px; margin-right: 3px; width: 400px;"
                                                                <table class="TaskViewerText"
                                                                    <tr> 
                                                                        <td> 
                                                                            Document Number : 
                                                                        </td> 
                                                                        <td> 
                                                                            <asp:Label ID="uiDocumentNumberLabelText" Text="[insert text here]" runat="server" /> 
                                                                        </td> 
                                                                    </tr> 
                                                                    <tr> 
                                                                        <td> 
                                                                            Document Title : 
                                                                        </td> 
                                                                        <td> 
                                                                            <asp:Label ID="uiDocumentTitleLabelText" Text="[insert text here]" runat="server" /> 
                                                                        </td> 
                                                                    </tr> 
                                                                    <tr> 
                                                                        <td> 
                                                                            Owner : 
                                                                        </td> 
                                                                        <td> 
                                                                            <asp:HyperLink ID="uiDocOwnerLabelText" Text="[insert text here]" runat="server" /> 
                                                                        </td> 
                                                                    </tr> 
                                                                    </tr> 
                                                                    <tr> 
                                                                        <td> 
                                                                            Admin Owner : 
                                                                        </td> 
                                                                        <td> 
                                                                            <asp:HyperLink ID="uiDocAdminOwnerLabelText" Text="[insert text here]" runat="server" /> 
                                                                        </td> 
                                                                    </tr> 
                                                                    <tr> 
                                                                        <td> 
                                                                            Due Date : 
                                                                        </td> 
                                                                        <td> 
                                                                            <asp:Label ID="uiDueDateLabelText" Text="[insert text here]" runat="server" /> 
                                                                        </td> 
                                                                    </tr> 
                                                                </table> 
                                                                Administrator Comments : 
                                                                <asp:TextBox ID="uiAdministratorComments" ReadOnly="true" TextMode="multiline" Height="125" 
                                                                    Width="350" runat="server"/> 
                                                                <br /> 
                                                                Document History Notes : 
                                                                <asp:TextBox ID="uiAuditTrailNotes" ReadOnly="true" TextMode="multiline" Height="125" 
                                                                    Width="350" runat="server"/> 
                                                                <asp:Label ID="uiApproverText" Text="[insert text here]" runat="server" /> 
                                                                <div style="overflow-x: auto; overflow-y: scroll; height: 125px; width: 350px; padding-left: 2px; 
                                                                    margin-left: 5px; border: solid 1px #7F9DB9;"> 
                                                                    <asp:PlaceHolder ID="uiSummaryHeader" runat="server" /> 
                                                                </div> 
                                                            </div> 
                                                        </asp:Panel> 
                                                    </ItemTemplate> 
                                                </telerik:RadPanelItem> 
                                            </Items> 
                                        </telerik:RadPanelItem> 
                                        <telerik:RadPanelItem Text="Comment History" Height="32px" Font-Bold="true" runat="server"
                                            <Items> 
                                                <telerik:RadPanelItem id="uiChatPanel" runat="server"
                                                    <ItemTemplate> 
                                                        <telerik:RadSplitter ID="ChatSplitter" runat="server" Height="97%" Width="398" Orientation="Horizontal" 
                                                            ResizeWithParentPane="false" PanesBorderSize="0" BorderSize="0" OnClientLoaded = "scrollPositionBottom" 
                                                            OnClientResized="scrollPositionBottom"
                                                            <telerik:RadPane ID="uiChatPaneRadPane" runat="server" Scrolling="Y"
                                                                <asp:PlaceHolder ID="uiChatConsole" runat="server" /> 
                                                            </telerik:RadPane> 
                                                            <telerik:RadSplitBar ID="uiTaskViewerSplitBar1" runat="server" CollapseMode="None" 
                                                                EnableResize="false" /> 
                                                            <telerik:RadPane Height="180" MinHeight="180" MaxHeight="180" ID="TopPane" runat="server" 
                                                                Scrolling="none"
                                                                <div class="TaskViewerText"
                                                                    <div style="text-align: left; margin-top: 5px; margin-left: 10px;"
                                                                        Comment : 
                                                                    </div> 
                                                                    <div style="text-align: left; margin-top: 3px; margin-left: 10px;"
                                                                        <asp:TextBox ID="uiChatComment" runat="server" TextMode="multiline" Style="height: 125px; 
                                                                            width: 350px;">  
                                                                        </asp:TextBox> 
                                                                    </div> 
                                                                    <div style="text-align: right; margin-top: 10px; margin-right: 10px;"
                                                                        <asp:Button Text="Submit" OnClick="sendMessage_Click" runat="server" Enabled="false" 
                                                                            ID="sendMessage" Style="width: 100px;"></asp:Button> 
                                                                    </div> 
                                                                </div> 
                                                            </telerik:RadPane> 
                                                        </telerik:RadSplitter> 
                                                    </ItemTemplate> 
                                                </telerik:RadPanelItem> 
                                            </Items> 
                                        </telerik:RadPanelItem> 
                                        <telerik:RadPanelItem Text="Voting Summary" Height="32px" Font-Bold="true" runat="server"
                                            <Items> 
                                                <telerik:RadPanelItem id="uiVotingPanel" runat="server"
                                                    <ItemTemplate> 
                                                        <telerik:RadSplitter ID="VotingSplitter" runat="server" Height="98%" Width="398" 
                                                            Orientation="Horizontal" ResizeWithParentPane="false" PanesBorderSize="0" BorderSize="0"
                                                            <telerik:RadPane ID="uiDocumentPreviewPane" runat="server" Scrolling="Y"
                                                                <asp:PlaceHolder ID="uiVotingSummary" runat="server" /> 
                                                            </telerik:RadPane> 
                                                            <telerik:RadSplitBar ID="uiTaskViewerSplitBar2" runat="server" CollapseMode="None" 
                                                                EnableResize="false" /> 
                                                            <telerik:RadPane Height="200" MinHeight="200" MaxHeight="200" ID="TopPane" runat="server" 
                                                                Scrolling="none"
                                                                <div class="TaskViewerText"
                                                                    <div style="text-align: left; margin-top: 1px; margin-left: 10px;"
                                                                        Vote : 
                                                                    </div> 
                                                                    <div style="text-align: left; margin-top: 1px; margin-left: 10px;"
                                                                        <asp:TextBox ID="uiComment" runat="server" TextMode="multiline" Style="height: 140px; 
                                                                            width: 350px;">  
                                                                        </asp:TextBox> 
                                                                    </div> 
                                                                    <table style="width: 100%"
                                                                        <tr style="width: 100%"
                                                                            <td style="width: 50%"
                                                                            </td> 
                                                                            <td style="width: 50%"
                                                                                <div style="text-align: right; margin-top: 10px; margin-bottom: 20px; margin-right: 10px;"
                                                                                    <asp:Button Text="Pass" OnClick="sendVotePass_Click" runat="server" ID="uiPassRadioButton" 
                                                                                        Style="width: 75px;"></asp:Button> 
                                                                                    <asp:Button Text="Fail" OnClick="sendVoteFail_Click" runat="server" ID="uiFailRadioButton" 
                                                                                        Style="width: 75px;" Enabled="false"></asp:Button> 
                                                                                </div> 
                                                                            </td> 
                                                                        </tr> 
                                                                    </table> 
                                                                </div> 
                                                            </telerik:RadPane> 
                                                        </telerik:RadSplitter> 
                                                    </ItemTemplate> 
                                                </telerik:RadPanelItem> 
                                            </Items> 
                                        </telerik:RadPanelItem> 
                                    </Items> 
                                </telerik:RadPanelBar> 
                            </telerik:RadPane> 
                        </telerik:RadSplitter> 
                    </telerik:RadAjaxPanel> 
                </telerik:RadPane> 
                <telerik:RadSplitBar ID="uiTaskViewerSplitBar3" runat="server" CollapseMode="None" 
                    EnableResize="false" Visible="false" /> 
                <telerik:RadPane ID="uiDocumentPreviewPane" runat="server" Scrolling="Both" Width="100%"
                </telerik:RadPane> 
            </telerik:RadSplitter> 
            <telerik:RadWindowManager ID="RadWindowManager1" ShowContentDuringLoad="false" VisibleStatusbar="false" 
                ReloadOnShow="true" runat="server" Skin="Outlook"
                <Windows> 
                    <telerik:RadWindow runat="server" ID="RadWindow1" Behaviors="Close" NavigateUrl="AuthorisersEditControl/AuthorisersEditControl.aspx" 
                        Width="400px" Height="210px"
                    </telerik:RadWindow> 
                </Windows> 
            </telerik:RadWindowManager> 
            </form> 
        </div> 
    </body> 
    </html> 

  2. Kevin
    Kevin avatar
    83 posts
    Member since:
    Sep 2008

    Posted 07 Apr 2010 Link to this post

    not sure my image attached the first time. lets try that again!
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Kevin
    Kevin avatar
    83 posts
    Member since:
    Sep 2008

    Posted 13 Apr 2010 Link to this post

    Anyone got any ideas on this??
  5. Answer
    Yana
    Admin
    Yana avatar
    4554 posts

    Posted 14 Apr 2010 Link to this post

    Hi Kevin,

    We're so sorry for the delayed reply.

    I've modified your code to demonstrate how to achieve this with "ChatSplitter", you can use the same approach for the other splitter. Please download the attached file and give it a try.

    Greetings,
    Yana
    the Telerik team

    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items.
  6. Kevin
    Kevin avatar
    83 posts
    Member since:
    Sep 2008

    Posted 14 Apr 2010 Link to this post

    Yana,
    Thanks for the effort, however the Splitter is still not stretching??

    please see attatched image for deails.
  7. Yana
    Admin
    Yana avatar
    4554 posts

    Posted 15 Apr 2010 Link to this post

    Hello kevin,

    It is working as expecting in the test page I've sent in my previous, could you please send us a live url where we could observe the issue? Thanks in advance

    Greetings,
    Yana
    the Telerik team

    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items.
  8. Kevin
    Kevin avatar
    83 posts
    Member since:
    Sep 2008

    Posted 18 May 2010 Link to this post

    Yana,
    Never mind managed to remedy this now!
    thanks very much for your help!
  9. Greg
    Greg avatar
    29 posts
    Member since:
    Oct 2007

    Posted 08 Mar 2014 in reply to Kevin Link to this post

    Can you share your solution? Thanks.
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017