Hight problem in Splitter Fullwindow with Updatepanel

3 posts, 0 answers
  1. mohmedsadiq modan
    mohmedsadiq modan avatar
    26 posts
    Member since:
    May 2010

    Posted 20 Apr 2011 Link to this post

    Hi,
    I have implement full window of splitter control with update panel, it is working perfect in IE7 with update panel and without update panel.
    But in firefox it is not working with Update panel,  it causes height problem, content is not viewable properly. When I remove update panel from page then it is working perfect. I have telerik version (2010.3.1109.20). Code is look like as below.

    <%@ Page Language="C#" AutoEventWireup="true" CodeFile="DefaultTesting.aspx.cs" Inherits="_DefaultTesting"
        EnableEventValidation="false" ValidateRequest="false" %>
    <%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %>
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/tr/xhtml11/dtd/xhtml11.dtd">
    <html>
    <head runat="server">
     <title>-:: ::-</title>
        <meta http-equiv="X-UA-Compatible" content="IE=7" />
        <style type="text/css">
            html, body, form
            {
                height: 100%;
                margin: 0px;
                padding: 0px;
                overflow: hidden;
            }
        </style>
    </head>
    <form id="form1" runat="server">
    <div id="ParentDivElement" style="height: 100%;">
           <asp:ScriptManager runat="server" ID="RadScriptManager1">
            </asp:ScriptManager>
         <asp:UpdatePanel ID="updatePnl" runat="server">
                <ContentTemplate>
    <telerik:RadSplitter ID="MainSplitter"  runat="server" Height="100%" Width="100%"
                        Orientation="Horizontal" Skin="Windows7" VisibleDuringInit="false" LiveResize="true">
                        <telerik:RadPane ID="TopPane" runat="server" Height="100" MinHeight="85" MaxHeight="150"
                            Scrolling="none">
                            <!-- Place the content of the pane here -->
                            header...........header...............header
                        </telerik:RadPane>
                        <telerik:RadSplitBar ID="RadsplitbarTop" runat="server" CollapseMode="Forward" Skin="Windows7" />
                        <telerik:RadPane ID="MainPane" runat="server" Scrolling="none" MinWidth="500">
                            <telerik:RadSplitter ID="NestedSplitter" runat="server" Skin="Windows7" ResizeWithParentPane="true" Height="100%" Width="100%">
                                <telerik:RadPane ID="LeftPane" runat="server" Width="200" MinWidth="150" MaxWidth="400">
                                    <div style="float: left; margin-left: 10px;">
                                        <telerik:RadTreeView ID="tvNodes" runat="server" EnableDragAndDrop="True" ExpandAnimation-Type="OutExpo"
                                            ExpandAnimation-Duration="800" EnableDragAndDropBetweenNodes="true" CollapseAnimation-Type="OutElastic"
                                            CollapseAnimation-Duration="800">
                                            <ContextMenus>
                                                <telerik:RadTreeViewContextMenu ID="NodesTreeMenu" runat="server" CssClass="MenuGroup"
                                                    Skin="Windows7">
                                                    <CollapseAnimation Type="none" />
                                                </telerik:RadTreeViewContextMenu>
                                            </ContextMenus>
                                        </telerik:RadTreeView>
                                    </div>
                                </telerik:RadPane>
                                <telerik:RadSplitBar ID="VerticalSplitBar" runat="server" CollapseMode="Forward" />
                                <telerik:RadPane ID="ContentPane" runat="server">
                                    <div id="props">
                                        <div style="position: absolute; top: 300px; left: 750px; z-index: 999;">
                                            <asp:UpdateProgress ID="UpdateProgress1" runat="server" AssociatedUpdatePanelID="updatePnl"
                                                DisplayAfter="1" DynamicLayout="true">
                                                <ProgressTemplate>
                                                    <img border="0" alt="" src="Images/spinner2.gif" />
                                                </ProgressTemplate>
                                            </asp:UpdateProgress>
                                        </div>
                                        <div id="page-content">
                                            <asp:PlaceHolder ID="pnlSurvey" runat="server">
                                                <div>
                                                    <asp:Button ID="btnSave" runat="server" OnClick="btnAddNode_Click" Text="Save" />
                                                    &nbsp;
                                                    <asp:Button ID="btnPublish" runat="server" OnClick="btnPublish_Click" Text="Publish" />
                                                </div>
                                                <div style="float: right">
                                                    <p class="mt" id="testMT" runat="server">
                                                        <a href="javascript:" id="MenuEF" style="border: 0px; text-decoration: none;">
                                                            <img src="Images/settings.png" style="border: 0px; text-decoration: none" alt='Settings'></a>
                                                    </p>
                                                </div>
                                                <div style="float: left">
                                                   Content  Content  Content
                                                </div>
                                            </asp:PlaceHolder>
                                            <div>
                                                <asp:Button ID="btnBottomSave" runat="server" OnClick="btnAddNode_Click" Text="Save" />
                                                &nbsp;
                                                <asp:Button ID="btnBottomPublish" runat="server" OnClick="btnPublish_Click" Text="Publish" />
                                            </div>
                                            <br />                                     
                                        </div>
                                    </div>
                                </telerik:RadPane>
                            </telerik:RadSplitter>
                        </telerik:RadPane>
                    </telerik:RadSplitter>
    </ContentTemplate>
            </asp:UpdatePanel>
        </div>
    </form>
    </body>
    </html>


    Kindly Help me out from this issue.

    Thanks in Advance.
    Sadiq Modan
  2. mohmedsadiq modan
    mohmedsadiq modan avatar
    26 posts
    Member since:
    May 2010

    Posted 21 Apr 2011 Link to this post

    Hello,

    Now I Have downloaded latest version of telerik control and check with same code but it is still give same output.

    Any one have solution to show form height of page with splitter control with asp updatepanel.

    Thanks in advance.

    Regards,
    Sadiq Modan
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Rumen
    Admin
    Rumen avatar
    12846 posts

    Posted 25 Apr 2011 Link to this post

    Hi Sadiq,

    Thank you for the provided page, I examined it and I was able to reproduce the problem.

    As you know, to correctly configure the size of an element in percentages, all its parent elements should have explicit height set. However, when you ajaxify a control the generated div tag of the update panel wraps the control in it and you should set the size of this update panel as well e.g

    <style type="text/css">
        html, body, form
        {
            height: 100%;
            margin: 0px;
            padding: 0px;
            overflow: hidden;
        }
             
        #updatePnl
        {
            height: 100% !important;
        }
    </style>
    ...
    <asp:UpdatePanel ID="updatePnl" runat="server"> 
    ...


    Best regards,
    Rumen
    the Telerik team

    Browse the vast support resources we have to jump start your development with RadControls for ASP.NET AJAX. See how to integrate our AJAX controls seamlessly in SharePoint 2007/2010 visiting our common SharePoint portal.

Back to Top