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

Splitter Height problem

4 Answers 63 Views
Splitter
This is a migrated thread and some comments may be shown as answers.
Boris
Top achievements
Rank 1
Boris asked on 14 Apr 2014, 08:34 PM
I have a page with a master page in a C# 4.0 Web app (Visual Studio 2012.)

From my reading I am aware that there are potential problems in making a RadSplitter fill a page.
This page consists of 3 horizontal sections on the left and one vertical one on the right.  
Up till now this page has been operated using Javascript to expose/hide controls and expand/collapse the RadPaneForm control.
Basically, the expand/collapse of RadPaneForm needs to be controlled by a RadComboBox in the center left section of the splitter.

I've been trying to 'Ajax-ify' the splitter in order to replace the JavaScript with code-behind C#.  
(And for once I've had the time and ability to boil the problem down to a demo.  Here it is.
The page has no code-behind in either the master page or the TestPage.  Note that there are two RadComboBoxes in Panel1.

The problem is as follows: The splitter displays at half page height unless I remove one of the RadComboBoxes.  Then it displays at full height.

Master Page html:
<%@ Master Language="C#" AutoEventWireup="true" CodeBehind="SiteTest.Master.cs" Inherits="WebApplicationSplitterTest.SiteTest" %>
<%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
    <head id="Head1" runat="server">
        <title></title>
        <asp:ContentPlaceHolder ID="head" runat="server">
        </asp:ContentPlaceHolder>
    </head>
    <body >
        <form id="form1" runat="server" >
            <asp:ContentPlaceHolder ID="cph1" runat="server">              
            </asp:ContentPlaceHolder>            
            <telerik:RadScriptManager ID="RadScriptManager1" runat="server">
                <Scripts>
                    <asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.Core.js" />
                    <asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.jQuery.js" />
                    <asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.jQueryInclude.js" />
                </Scripts>
            </telerik:RadScriptManager>         
            <header>              
            </header>
            <div id="ParentDivElement" style="height:85%">
                <asp:ContentPlaceHolder ID="MainContent" runat="server">
                </asp:ContentPlaceHolder>
            </div>
            <div style="text-align: center; margin: auto; margin-left: auto; margin-right: auto; width: 100%; margin-bottom: auto;height:20px">
                <br />
                <br />
                <p> This is a footer</p>
            </div>

        </form>
    </body>
</html>

Main Page HTML:

<%@ Page Language="C#" Async="true" MasterPageFile="~/SiteTest.Master" AutoEventWireup="true" CodeBehind="TestPage.aspx.cs" Inherits="WebApplicationSplitterTest.TestPage" %>

<%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %>

<asp:Content runat="server" ID="BodyContent" ContentPlaceHolderID="MainContent">

    <telerik:RadAjaxManager ID="RadAjaxManager1" runat="server">
        <AjaxSettings>
            <telerik:AjaxSetting AjaxControlID="RadSplitter1">

            </telerik:AjaxSetting>
            <telerik:AjaxSetting AjaxControlID="ddlOne">
                <UpdatedControls>
                    <telerik:AjaxUpdatedControl ControlID="ddlTwo" />
                </UpdatedControls>
            </telerik:AjaxSetting>
            <telerik:AjaxSetting AjaxControlID="ddlTwo">
                <UpdatedControls>
                    <telerik:AjaxUpdatedControl ControlID="RadSplitter1"  />
                    <telerik:AjaxUpdatedControl ControlID="Panel1" />
                    <telerik:AjaxUpdatedControl ControlID="Panel2" />
                </UpdatedControls>
            </telerik:AjaxSetting>
        </AjaxSettings>
    </telerik:RadAjaxManager>

    <telerik:RadInputManager ID="RadInputManager1" runat="server">
    </telerik:RadInputManager>

    <telerik:RadWindowManager ID="RadWindowManager1" runat="server" VisibleStatusbar="false" VisibleTitlebar="true" Width="600px">
    </telerik:RadWindowManager>

    <script src="Scripts/jquery-1.7.1.js"></script>

    <telerik:RadCodeBlock ID="RadCodeBlock1" runat="server">

       
        <style type="text/css">
            html, body, form {
            height: 100%;
            margin: 0px;
            padding: 0px;
            }
        </style>

    </telerik:RadCodeBlock>
    
    <telerik:RadSplitter ID="RadSplitter1" runat="server" Height="100%" Width="100%" HeightOffset="20" Orientation="Vertical"  >

        <telerik:RadPane ID="RadpaneTicket" runat="server" Height="100%" Width="70%" Scrolling="Y" >
            <telerik:RadSplitter runat="server" Height="100%" Width="100%" Orientation="Horizontal">
                <telerik:RadPane ID="RadPane1" runat="server" Scrolling="None" Height="25px">
                    <div style="width: 100%; text-align: center">
                        <asp:Label ID="lblAnnouncements" runat="server" Text='Announcements' Font-Bold="True" ForeColor="Blue" Font-Size="Large"></asp:Label>
                    </div>
                </telerik:RadPane>
                <telerik:RadSplitBar ID="RadSplitBar3" runat="server" Visible="false"></telerik:RadSplitBar>
                <telerik:RadPane ID="RadpaneAnnouncements" runat="server" Height="15%" Scrolling="Both" BackColor="AliceBlue">
                    <div style="width: 100%; text-align: center;">
                        <asp:Label ID="lblNone" runat="server" Text='There are no current announcements' Visible="false" Font-Bold="True" BackColor="AliceBlue" ForeColor="Black" Font-Size="Large"></asp:Label>
                    </div>
                    <div style="width: 95%; height: 100%; margin-left: auto; margin-right: auto">
                       
                    </div>
                </telerik:RadPane>
                <telerik:RadSplitBar ID="RadSplitBar2" runat="server" ></telerik:RadSplitBar>
                <telerik:RadPane runat="server" Scrolling="Y" >
                    <telerik:RadSplitter ID="RadSplitterEditor" runat="server" >
                        <telerik:RadPane ID="RadPaneEditor" runat="server">

                            <table style="width: 100%; height: 100%; margin-top: auto; margin-bottom:auto">
                                <tr>
                                    <td colspan="2">
                                        <asp:ValidationSummary ID="ValidationSummary2" runat="server" Font-Bold="True" ForeColor="Red" />
                                    </td>
                                </tr>
                                <tr>
                                    <td colspan="2"></td>
                                </tr>
                                <tr style="width: 100%; vertical-align: top; height: 5%;">
                                    <td style="text-align: left;" colspan="2">
                                        <asp:Panel ID="Panel1"  runat="server" Width="100%" Height="100%" >                                          
                                          
                                            <telerik:RadComboBox ID="ddlOne" runat="server"  
                                                                 Height="100px" Label="RadComboBox 1" Sort="Ascending" NoWrap="true" Font-Size="Large"  Width="301px" Font-Names="Arial" AutoPostBack="true" CausesValidation="False">
                                            </telerik:RadComboBox>
                                              <telerik:RadComboBox ID="ddlTwo" runat="server"   
                                                                 Height="200px" Label="RadComboBox2" Sort="Ascending" NoWrap="True" Font-Size="Large"  Width="275px" Font-Names="Arial" AutoPostBack="true"  >
                                            </telerik:RadComboBox>
                                           
                                        </asp:Panel>
                                    </td>
                                </tr>
                                <tr>
                                    <td style="width: 100%; height: 85%" colspan="2">
                                    </td>
                                </tr>
                            </table>

                            <div>
                                <telerik:RadProgressManager ID="RadProgressManager1" runat="server" />
                                <telerik:RadProgressArea ID="RadProgressArea1" runat="server" ProgressIndicators="TotalProgressBar, TotalProgress, TotalProgressPercent, RequestSize, FilesCountBar, FilesCount, SelectedFilesCount, CurrentFileName, TimeElapsed, TimeEstimated, TransferSpeed"></telerik:RadProgressArea>
                            </div>

                        </telerik:RadPane>

                        <telerik:RadSplitBar ID="RadSplitBarForm" runat="server"></telerik:RadSplitBar>
                        <telerik:RadPane ID="RadPaneForm" runat="server" Scrolling="Both" Collapsed="false" Width="100%" Height="100%">
                            <asp:Panel ID="Panel2" runat="server">
                                
                            </asp:Panel>
                        </telerik:RadPane>

                    </telerik:RadSplitter>

                </telerik:RadPane>
                <telerik:RadSplitBar ID="RadSplitBar5" runat="server" EnableResize="false">
                </telerik:RadSplitBar>

                <telerik:RadPane ID="RadPane3" runat="server" Height="40px" Scrolling="None" Width="100%" >
                    <table style="width:100%">
                        <tr style="height: 40px; width:100%">
                            <td style="width: 70%; float: left;">
                                <telerik:RadUpload ID="RadUpload1" runat="server" ControlObjectsVisibility="ClearButtons" TargetFolder="~/Files" InputSize="40"    ></telerik:RadUpload>
                            </td>
                            <td style="width: 25%; float: right; text-align: right;">
                                <telerik:RadButton ID="btnSave" runat="server" Text="Save"  ></telerik:RadButton>
                                &#160;&#160;
                                <telerik:RadButton ID="btnCancel" runat="server" Text="Clear"  CausesValidation="False" ></telerik:RadButton>
                            </td>
                        </tr>
                    </table>
                </telerik:RadPane>
            </telerik:RadSplitter>
        </telerik:RadPane>

        <telerik:RadSplitBar ID="RadSplitBar1" runat="server"></telerik:RadSplitBar>

        <telerik:RadPane ID="RadPaneRightSide" runat="server" Width="30%" Height="15%" Scrolling="None">
            <telerik:RadSplitter ID="RadSplitter2" runat="server" Orientation="Horizontal">
                <telerik:RadPane ID="RadPane2" runat="server" Scrolling="None" Height="25px">
                    <div style="width: 100%; text-align: center">
                        <asp:Label ID="Label2" runat="server" Text='System Status' Font-Bold="True" ForeColor="Blue" Font-Size="Large"></asp:Label>
                    </div>
                </telerik:RadPane>
                <telerik:RadSplitBar ID="RadSplitBar4" runat="server" Visible="false"></telerik:RadSplitBar>
                <telerik:RadPane ID="RadPaneSys" runat="server" Scrolling="Both" Height="100%">
                    <div style="width: 95%; margin-left: auto; margin-right: auto;">
                    </div>
                </telerik:RadPane>
            </telerik:RadSplitter>
        </telerik:RadPane>
    </telerik:RadSplitter>
</asp:Content>


4 Answers, 1 is accepted

Sort by
0
Vessy
Telerik team
answered on 17 Apr 2014, 04:03 PM
Hi Boris,

Thank you for the provided code. I amnaged to reproduce the issue and it turned out to be connected with improper ajax configuration (you can test it by disabling the ajax on the page).

With the current configuration you have nested Ajax panels, which are cancelling each others and so the Splitter does not function properly (because the Splitter contains the dropdowns which are also updated). Removing the Splitter update from the following ajax settings should fix the issue:
<telerik:AjaxSetting AjaxControlID="ddlTwo">
    <UpdatedControls>
        <%--<telerik:AjaxUpdatedControl ControlID="RadSplitter1" />--%>
        <telerik:AjaxUpdatedControl ControlID="Panel1" />
        <telerik:AjaxUpdatedControl ControlID="Panel2" />
    </UpdatedControls>
</telerik:AjaxSetting>

I hope this helps.

Regards,
Vessy
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.

 
0
Boris
Top achievements
Rank 1
answered on 23 Apr 2014, 08:51 PM
That much worked.  Thanks.  But of course that was only a demo.

A hypothetical question, just to make things more complicated.  (I'm engaging in a bit of trial and error as I write this.)

Assume a set of custom ASCXs within one of those panels.  
All of them are similar and all have at least one identically named control in common.
Only one of them will be visible and enabled at any given time.   
Each of these controls will have a RadCombo box that updates another RadCombo box 
(The usual design pattern: Changing ddlOne refreshes the content of ddlTwo.).

What I have so far is as follows (based on the previous example).  
Does this structure look OK to you?  So far it works.  I have yet to start adding multiple controls.

<telerik:RadAjaxManager ID="RadAjaxManager1" runat="server">
        <AjaxSettings>
            <telerik:AjaxSetting AjaxControlID="RadSplitter1"></telerik:AjaxSetting>
            <telerik:AjaxSetting>
                <UpdatedControls>
                    <telerik:AjaxUpdatedControl ControlID="pnlForms" />
                </UpdatedControls>
            </telerik:AjaxSetting>
            <telerik:AjaxSetting AjaxControlID="pnlForms">
                <UpdatedControls>
                    <telerik:AjaxUpdatedControl ControlID="ACustomForm" />
                </UpdatedControls>
            </telerik:AjaxSetting>
            <telerik:AjaxSetting AjaxControlID="ACustomForm">
                <UpdatedControls>
                    <telerik:AjaxUpdatedControl ControlID="ddlOne" />
                </UpdatedControls>
            </telerik:AjaxSetting>
            <telerik:AjaxSetting AjaxControlID="ddlOne">
                <UpdatedControls>
                    <telerik:AjaxUpdatedControl ControlID="ddlTwo" />
                </UpdatedControls>
            </telerik:AjaxSetting>
        </AjaxSettings>
    </telerik:RadAjaxManager>
0
Vessy
Telerik team
answered on 25 Apr 2014, 02:58 PM
Hi Boris,

I am afraid that I cannot tell whether the manager configuration is set properly without reviewing the ierarchy of the controls that are updated. The main thing that you have to pay attention when configuring the AJAX settings is avoid the update cycles, so the ajax request would not cancel each others.

Let me try to explain in more details what I mean. The code provided in your first post has the followinf update cycle:
  • ddl2 (child of RadSPlitter1) updates ddlTwo
  • ddlTwo updates RadSplitter => RadSplitter updates all its children, including ddlOne and here is the endless cycle
I hope this information will be helpful for you.

Regards,
Vessy
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.

 
0
Boris
Top achievements
Rank 1
answered on 25 Apr 2014, 06:26 PM
Actually forget it.  Based on what I've read since, that's doesn't make sense.  I've opened a ticket to get detailed help on how to implement Ajax within the RadSplitter.
Tags
Splitter
Asked by
Boris
Top achievements
Rank 1
Answers by
Vessy
Telerik team
Boris
Top achievements
Rank 1
Share this question
or