RadPanelBar Expand Collpase Arrow/Icon Issue

6 posts, 0 answers
  1. dipen shah
    dipen shah avatar
    11 posts
    Member since:
    Jan 2010

    Posted 15 Jan 2010 Link to this post

    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
  2. Yana
    Admin
    Yana avatar
    4554 posts

    Posted 19 Jan 2010 Link to this post

    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.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. dipen shah
    dipen shah avatar
    11 posts
    Member since:
    Jan 2010

    Posted 19 Jan 2010 Link to this post

    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
  5. Yana
    Admin
    Yana avatar
    4554 posts

    Posted 20 Jan 2010 Link to this post

    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.
  6. dipen shah
    dipen shah avatar
    11 posts
    Member since:
    Jan 2010

    Posted 20 Jan 2010 Link to this post

    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
  7. Yana
    Admin
    Yana avatar
    4554 posts

    Posted 25 Jan 2010 Link to this post

    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.
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017