RadPanelBar Expand Collpase Arrow/Icon Issue

[dipen shah]

Hi,

We are using RadDock and RadPanelbar inside the RadDock. We have issue with RadPanelbar. The expand and collapse arrow/Image is not working properly.
Here is the code.

<%

@ Page Language="C#" AutoEventWireup="true" CodeFile="Default3.aspx.cs" Inherits="Default3" %>

 

<%

@ 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">

 

<

 

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

 

<

 

head runat="server">

 

 

<title>Untitled Page</title>

 

 

<link rel="stylesheet" href="Styles/UDStyles.css" />

 

</

 

head>

 

<

 

body>

 

 

 

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

 

 

<telerik:RadScriptManager ID="RadScriptManager1" runat="server">

 

 

</telerik:RadScriptManager>

 

 

<telerik:RadDockLayout ID="RadDockLayout1" runat="server">

 

 

<telerik:RadDockZone ID="RadDockZone1" runat="server" Height="300px" Width="300px">

 

 

<telerik:RadDock ID="RadDock1" Skin="Web20" runat="server" Width="300px">

 

 

<TitlebarTemplate>

 

 

<table class="TitleBar">

 

 

<tr>

 

 

<td width="17%">

 

Dipen

 

</td>

 

 

<td width="83%">

 

Shah

 

</td>

 

 

</tr>

 

 

</table>

 

 

</TitlebarTemplate>

 

 

<ContentTemplate>

 

 

<telerik:RadPanelBar ID="RadPanelBar1" Skin="Default" runat="server">

 

 

<Items>

 

 

<telerik:RadPanelItem runat="server" Text="Dipen's Team" Expanded="true">

 

 

<Items>

 

 

<telerik:RadPanelItem runat="server">

 

 

<ItemTemplate>

 

 

<table border="1" width="100" >

 

 

<tr>

 

 

<td>Dipen</td>

 

 

<td>Shah</td>

 

 

</tr>

 

 

<tr>

 

 

<td>ABC</td>

 

 

<td>DEF</td>

 

 

</tr>

 

 

<tr>

 

 

<td>HIJ</td>

 

 

<td>LMN</td>

 

 

</tr>

 

 

<tr>

 

 

<td>OPQ</td>

 

 

<td>RST</td>

 

 

</tr>

 

 

</table>

 

 

</ItemTemplate>

 

 

</telerik:RadPanelItem>

 

 

</Items>

 

 

</telerik:RadPanelItem>

 

 

</Items>

 

 

</telerik:RadPanelBar>

 

 

</ContentTemplate>

 

 

</telerik:RadDock>

 

 

</telerik:RadDockZone>

 

 

</telerik:RadDockLayout>

 

 

</form>

 

</

 

body>

 

</

 

html>

 

I attached 2 screen shot. Issue is Very first time load icon is in expanded mode. when we collapse it it should change. But this is not happenning. Please take a look of first image. Then collapse rad panel. See the screen 2.

Please help me to resolve this issue.



Thanks,
Dipen Shah

[Yana]

Hello Dipen Shah,

I couldn't reproduce such an issue with provided code -the panelbar item arrow works as expected. Could you please send us also the used css styles? Thanks

Regards,
Yana
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Watch a video on how to optimize your support resource searches and check out more tips on the blogs.

[dipen shah]

Hi Yana,
Here is the code again. I used only inbuild skin. For Dock I used Web20 and for PanelBar I used Default.
Still i am getting same issue. During expand arrow should be up. That is correct. But when we collapse panelbar arrow should be downside. That is the issue. 

<%

@ Page Language="C#" AutoEventWireup="true" CodeFile="Default3.aspx.cs" Inherits="Default3" %>

 

<%

 

@ 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">

 

<

 

 

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

 

<

 

 

head runat="server">

 

 

 

<title>Untitled Page</title>

 

 

</

 

head>

 

<

 

 

body>

 

 

 

 

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

 

 

 

<telerik:RadScriptManager ID="RadScriptManager1" runat="server">

 

 

 

</telerik:RadScriptManager>

 

 

 

<telerik:RadDockLayout ID="RadDockLayout1" runat="server">

 

 

 

<telerik:RadDockZone ID="RadDockZone1" runat="server" Height="300px" Width="300px">

 

 

 

<telerik:RadDock ID="RadDock1" Skin="Web20" runat="server" Width="300px">

 

 

 

<TitlebarTemplate>

 

 

 

<table style="float:left;" >

 

 

 

<tr>

 

 

 

<td width="17%">

 

 

Dipen

 

</td>

 

 

 

<td width="83%">

 

 

Shah

 

</td>

 

 

 

</tr>

 

 

 

</table>

 

 

 

</TitlebarTemplate>

 

 

 

<ContentTemplate>

 

 

 

<telerik:RadPanelBar ID="RadPanelBar1" Skin="Default" runat="server">

 

 

 

<Items>

 

 

 

<telerik:RadPanelItem runat="server" Text="Dipen's Team" Expanded="true">

 

 

 

<Items>

 

 

 

<telerik:RadPanelItem runat="server">

 

 

 

<ItemTemplate>

 

 

 

<table border="0" width="100" >

 

 

 

<tr>

 

 

 

<td>Dipen</td>

 

 

 

<td>Shah</td>

 

 

 

</tr>

 

 

 

<tr>

 

 

 

<td>ABC</td>

 

 

 

<td>DEF</td>

 

 

 

</tr>

 

 

 

<tr>

 

 

 

<td>HIJ</td>

 

 

 

<td>LMN</td>

 

 

 

</tr>

 

 

 

<tr>

 

 

 

<td>OPQ</td>

 

 

 

<td>RST</td>

 

 

 

</tr>

 

 

 

</table>

 

 

 

</ItemTemplate>

 

 

 

</telerik:RadPanelItem>

 

 

 

</Items>

 

 

 

</telerik:RadPanelItem>

 

 

 

</Items>

 

 

 

</telerik:RadPanelBar>

 

 

 

</ContentTemplate>

 

 

 

</telerik:RadDock>

 

 

 

</telerik:RadDockZone>

 

 

 

</telerik:RadDockLayout>

 

 

 

</form>

 

</

 

 

body>

 

</

 

 

html>

 

 

 





Thanks,
Dipen Shah

[Yana]

Hi Dipen shah,

This is the same code as in the previous post, did you manage to reproduce the issue with only this code? Which version of the controls and which browser  you're using? I've tested it with the latest release and it worked without this problem.

Kind regards,
Yana
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Watch a video on how to optimize your support resource searches and check out more tips on the blogs.

[dipen shah]

Hi,

We are using Telerik Q3 2009. IE is 6.0. In IE 7.0 it is working fine. But we need solution for IE 6.0 as well.

With the same code I can reproduce the Arrow issue.

Thanks,
Dipen Shah

[Yana]

Hi Dipen shah,

Finally I managed to reproduce the issue in IE6, please use the following workaround for now in order to fix it: subscribe to OnClientExpand and OnClientCollapse events of the panelbar and add this code to the page:

<script type="text/javascript">

    function itemCollapse(sender, args) {
        var txtElement = args.get_item().get_textElement();
        txtElement.style.backgroundPositionY = "0";
    }

    function itemExpand(sender, args) {
        var txtElement = args.get_item().get_textElement();
        txtElement.style.backgroundPositionY = "-476px";
    }

</script>

Kind regards,
Yana
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Watch a video on how to optimize your support resource searches and check out more tips on the blogs.