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

[Solved] Splitter collapse and expand hide panelbaritem

6 Answers 132 Views

Splitter

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

HSLaw asked on 06 Aug 2010, 10:18 AM

Hi there,
In my video capture below, when I collapse and expand the splitter, the panelbaritems will be hidden.
Did I set something wrong here?

Video: http://www.xtopia.com.my/ximnettest/telerik/2010-08-06_1656.swf
URL: http://www.xtopia.com.my/ximnettest/menu_test.aspx

Code:

<%@ Page Language="VB" AutoEventWireup="false" CodeFile="menu_test.aspx.vb" Inherits="menu_test" %>

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

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />

<html xmlns="http://www.w3.org/1999/xhtml">

<head runat="server">

<title></title>

<style type="text/css">

html, body, form

{

overflow: hidden;

height: 100%;

width: 100%;

margin: 0px;

padding: 0px;

}

</style>

</head>

<body>

<form id="form1" runat="server">

<telerik:RadScriptManager ID="r" runat="server" />

<telerik:RadSplitter Skin="Default" runat="Server" ID="mainSplit" Width="100%" Height="100%"

Orientation="Horizontal" LiveResize="true">

<telerik:RadPane ID="topPane" runat="server" Height="97">

<div>

Top</div>

</telerik:RadPane>

<telerik:RadSplitBar runat="server" ID="SplitBarTop" CollapseMode="Forward" Height="30px"

EnableResize="False" />

<telerik:RadPane runat="server" ID="cPMain" Scrolling="none">

<telerik:RadSplitter runat="server" ID="RadSplitter2" Skin="Default" BorderSize="0"

BorderStyle="None" ResizeMode="Proportional">

<telerik:RadPane runat="Server" ID="leftP" Width="230px" MinWidth="500" MaxWidth="350"

Scrolling="None" CssClass="relativePane">

<div style="height: 100%;">

<telerik:RadPanelBar runat="server" ID="mainPanel" Skin="Default" Height="100%" Width="100%"

EnableViewState="False" ExpandMode="FullExpandedItem" CollapseDelay="100">

<Items>

<telerik:RadPanelItem Text="panel1" Expanded="true" Value="CMS" id="cmsPanel">

<Items>

<telerik:RadPanelItem>

<ItemTemplate>

<telerik:RadAjaxPanel ID="RadAjaxPanel1" runat="server" LoadingPanelID="lp">

</telerik:RadAjaxPanel>

</ItemTemplate>

</telerik:RadPanelItem>

</Items>

</telerik:RadPanelItem>

<telerik:RadPanelItem Text="Panel 2" Value="PropMS" id="PropMSPanel">

<Items>

<telerik:RadPanelItem>

<ItemTemplate>

</ItemTemplate>

</telerik:RadPanelItem>

</Items>

</telerik:RadPanelItem>

<telerik:RadPanelItem Text="Panel 3" Value="SaleMS" id="SaleMSPanel">

<Items>

<telerik:RadPanelItem>

<ItemTemplate>

</ItemTemplate>

</telerik:RadPanelItem>

</Items>

</telerik:RadPanelItem>

<telerik:RadPanelItem Text="p4" Expanded="false" Value="CustServ" >

<Items>

<telerik:RadPanelItem>

<ItemTemplate>

<div style="padding: 10px;">

</div>

</ItemTemplate>

</telerik:RadPanelItem>

</Items>

</telerik:RadPanelItem>

<telerik:RadPanelItem Text="p5" Value="Media" id="MediaPanel">

<Items>

<telerik:RadPanelItem>

<ItemTemplate>

</ItemTemplate>

</telerik:RadPanelItem>

</Items>

</telerik:RadPanelItem>

<telerik:RadPanelItem Text="p6" Value="membersMS" >

<Items>

<telerik:RadPanelItem>

<ItemTemplate>

</ItemTemplate>

</telerik:RadPanelItem>

</Items>

</telerik:RadPanelItem>

<telerik:RadPanelItem Text="7" Value="Poll">

<Items>

<telerik:RadPanelItem>

<ItemTemplate>

</ItemTemplate>

</telerik:RadPanelItem>

</Items>

</telerik:RadPanelItem>

</Items>

</telerik:RadPanelBar>

</div>

</telerik:RadPane>

<telerik:RadSplitBar runat="server" ID="RadSplitBar1" CollapseMode="Forward" Width="50" />

<telerik:RadPane runat="Server" ID="cP">

Content

</telerik:RadPane>

</telerik:RadSplitter>

</telerik:RadPane>

</telerik:RadSplitter>

</form>

</body>

</html>

6 Answers, 1 is accepted

answered on 11 Aug 2010, 02:56 PM

Hi HSLaw,
I was able to reproduce the problem with the code you provided and forwarded it to our developers. We will fix it for Q2 2010 SP1, scheduled for the end of August. I have updated your Telerik points for bringing the problem to our attention.

In the meantime, you can use the following workaround:

<script type="text/javascript">

function OnClientExpanded(sender, args)

{

$telerik.repaintChildren(sender);

}

</script>

<telerik:RadSplitter Skin="Default" runat="Server" ID="mainSplit" Width="100%" Height="100%"

Orientation="Horizontal" LiveResize="true">

<telerik:RadPane ID="topPane" runat="server" Height="97">

<div>

Top</div>

</telerik:RadPane>

<telerik:RadSplitBar runat="server" ID="SplitBarTop" CollapseMode="Forward" Height="30px"

EnableResize="False" />

<telerik:RadPane runat="server" ID="cPMain" Scrolling="none">

<telerik:RadSplitter runat="server" ID="RadSplitter2" Skin="Default" BorderSize="0"

BorderStyle="None" ResizeMode="Proportional">

<telerik:RadPane runat="Server" ID="leftP" Width="230px" MinWidth="500" MaxWidth="350"

Scrolling="None" CssClass="relativePane" OnClientExpanded="OnClientExpanded">

<div style="height: 100%;">

Kind regards,
Tsvetie
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

answered on 27 Aug 2010, 04:21 PM

Hi Prava,

This problem was fixed in the latest version of RadControls for ASP.NET AJAX Q2 2010 SP1. I am unable to provide the code snippet of the exact fix, because it is complex and is not available as a stand alone fix. Nevertheless, it is highly recommended to use the latest version of RadControls.

All the best,
Dobromir
the Telerik team

answered on 30 Aug 2010, 04:59 PM

Hi Dobromir ,

I am using the latest version of RadControls but still get the same issue. One of the RadPane's visiblity is initially set to false which is modified as per requirement from code behind to true. On clicking RadSplitBar, it disappears. Can you kindly suggest how can I get my problem solved.
Given below is my markup and code.

<telerik:RadSplitter ID="MapSplitter" runat="server" Orientation="Horizontal" Skin="Vista" PanesBorderSize="0" BorderSize="0" VisibleDuringInit="false" >

<telerik:RadPane ID="DataGridPanel" runat="server" Scrolling="None" MinHeight="130" Height="130" Collapsed="true" >

<telerik:RadSplitter ID="Splitter2" runat="server" Orientation="Horizontal" Skin="Vista" PanesBorderSize="0" BorderSize="0" VisibleDuringInit="false" >

<telerik:RadPane ID="DataGrid2" runat="server" Scrolling="None" MinHeight="130" Height="130" Collapsed="true" >

<uc5:QryForm ID="QueryForm21" runat="server" > </uc5:QryForm>

</telerik:RadPane>

<telerik:RadSplitBar ID="RadSplitBar2" runat="server" CollapseMode="None" />

<telerik:RadPane ID="DataGrid3" runat="server" Scrolling="None" MinHeight="130" Height="130" Collapsed="true" >

<uc5:QryForm ID="QueryForm22" runat="server" > </uc5:QryForm>

</telerik:RadPane>

</telerik:RadSplitter>

</telerik:RadPane>

<telerik:RadSplitBar ID="MapRadSplitBar" runat="server" CollapseMode="None" />

<telerik:RadPane ID="DataGridPanel" runat="server" Scrolling="None" MinHeight="130" Height="130" Collapsed="true" Visible="false" >

<uc5:QryForm ID="QueryForm" runat="server" > </uc5:QryForm>

</telerik:RadPane>

</telerik:RadSplitter>

Code to change RadPane's Visibility:

public static void ShowQueryLayout()

{

DataGridPanel.visibility = true;

}

public static void HideQueryLayout()

{

DataGridPanel.visibility = false;

}

Thanks,
Prava

answered on 02 Sep 2010, 01:39 PM

Hi Prava,

From the provided code I noticed the following errors:

All of the RadPanes are initially collapsed (Collapsed="true") - This is incorrect declaration which may cause an unexpected behavior.
Two of the RadPanes have the same ID - This is also invalid declaration which will throw an exception during the page load.
RadPane does not offer visibility property - please find the full list of RadPane's properties in the following article: RadPane Class Properties

Could you please fix the above mentioned problems and see if the problem still exists? If so, could you please open a support ticket and provide a fully runnable project and / or a live URL so we can investigate the issue further?

Sincerely yours,
Dobromir
the Telerik team