mohmedsadiq modan
Top achievements
Rank 1
Rank 1
mohmedsadiq modan
asked on 20 Apr 2011, 01:49 PM
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" />
<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" />
<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
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" />
<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" />
<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 Answers, 1 is accepted
0
mohmedsadiq modan
Top achievements
Rank 1
Rank 1
answered on 21 Apr 2011, 06:45 AM
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
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
0
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
Best regards,
Rumen
the Telerik team
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.