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