RadPanelBar Rendering

2 posts, 0 answers
  1. Clement
    Clement avatar
    6 posts
    Member since:
    Nov 2011

    Posted 05 Dec 2011 Link to this post

    Hello,

    I’m trying to DataBind a RadPanelBar but with no success.

    Everything works fine when the RadPanelBar is not bound to data and we get the expected rendering. The moment the RadPanel gets bound to data only the parent RadPanelItem is displayed and the HTML in the Child RadPanelItem are not displayed. The RadPanelBar is bound to a Generic List. And I have also verified the exactitude of the dynamic data coming fetched from the DataBase.

    Can find the code behind & ASPX attached.

    <P><%@ Page Title="" Language="C#" MasterPageFile="~/boris.Master" 
    AutoEventWireup="true"<BR>    
    CodeBehind="rejsekort_GUI_underside.aspx.cs" 
    Inherits="Boris.rejsekort_GUI_underside" %></P>
    <P><asp:Content ID="Content1" ContentPlaceHolderID="bottom" 
    runat="server"><BR>    <div 
    class="dashboardPanelbar"><BR>        
    <telerik:RadPanelBar ID="panelBarDashboard" runat="server" Width="100%" 
    EnableEmbeddedSkins="false"<BR>            
    OnItemDataBound="panelBarDashboard_ItemDataBound" Skin="None" 
    OnPreRender="panelBarDashboard_PreRender"<BR>            
    CollapseDelay="100" ExpandDelay="100" BorderStyle="None" 
    ExpandMode="SingleExpandedItem" 
    AllowCollapseAllItems="true"><BR>            
    <Items><BR>                
    <telerik:RadPanelItem ImageUrl="Styles/Images/1318514913_clean.png" 
    Text="Henrik Hansen - 
    Person"<BR>                    
    Expanded="true" CssClass="roundedRadPanelItemFirst" 
    AccessKey="1"><BR>                    
    <Items><BR>                        
    <telerik:RadPanelItem><BR>                            
    <ItemTemplate><BR>                                
    <div 
    class="dashboardPanelbarItems"><BR>                                    
    <table 
    class="mainTable"><BR>                                        
    <tr><BR>                                            
    <td style="width: 
    50%"><BR>                                                
    <div 
    class="divRadPanelItemLeft"><BR>                                                    
    <span 
    class="spanRadPanelItemLegend">CARD</span><BR>                                                        
    <table cellspacing="0" width="90%" 
    class="leftTable"><BR>                                                        
    <tr 
    class="leftTableItemColor"><BR>                                                            
    <td><BR>                                                                
    Balance<BR>                                                            
    </td><BR>                                                            
    <td><BR>                                                                
    300 
    kr.<BR>                                                                
    <%# 
    Eval("CardBalance")%><BR>                                                            
    </td><BR>                                                            
    <td><BR>                                                                
    <a href="#">Reload 
    Saldo</a><BR>                                                                
    <br 
    /><BR>                                                                
    <a href="#">Saldo 
    modification</a><BR>                                                            
    </td><BR>                                                        
    </tr><BR>                                                        
    <tr 
    class="leftTableAlternateColor"><BR>                                                            
    <td><BR>                                                                
    Expiry 
    date<BR>                                                            
    </td><BR>                                                            
    <td><BR>                                                                
    14-06-2012<BR>                                                            
    </td><BR>                                                            
    <td><BR>                                                                
    &nbsp;<BR>                                                            
    </td><BR>                                                        
    </tr><BR>                                                        
    <tr 
    class="leftTableItemColor"><BR>                                                            
    <td><BR>                                                                
    Reload 
    contract<BR>                                                            
    </td><BR>                                                            
    <td><BR>                                                                
    300 kr.<br 
    /><BR>                                                                
    Min. 50 kr.<br 
    /><BR>                                                                
    daglige<BR>                                                            
    </td><BR>                                                            
    <td><BR>                                                                
    &nbsp;<BR>                                                            
    </td><BR>                                                        
    </tr><BR>                                                        
    <tr><BR>                                                            
    <td 
    colspan="3"><BR>                                                                
    &nbsp;<BR>                                                            
    </td><BR>                                                        
    </tr><BR>                                                        
    <tr><BR>                                                            
    <td colspan="3" 
    align="right"><BR>                                                                
    <telerik:RadButton ID="btnViewEditCard" runat="server" Text="View / Edit 
    card" 
    EnableEmbeddedSkins="false"<BR>                                                                    
    Skin="ThalesSkin" OnClick="btnViewEditCard_Click" CommandArgument="1" 
    AccessKey="n"<BR>                                                                    
    OnPreRender="btnViewEditCard_PreRender"><BR>                                                                
    </telerik:RadButton><BR>                                                            
    </td><BR>                                                        
    </tr><BR>                                                        
    <tr><BR>                                                            
    <td 
    colspan="3"><BR>                                                                
    &nbsp;<BR>                                                            
    </td><BR>                                                        
    </tr><BR>                                                    
    </table><BR>                                                
    </div><BR>                                            
    </td><BR>                                            
    <td style="width: 
    50%"><BR>                                                
    <div 
    class="divRadPanelItemRight"><BR>                                                    
    <span 
    class="spanRadPanelItemLegend">SETTINGS</span><BR>                                                    
    <table cellspacing="0" width="90%" 
    class="rightTable"><BR>                                                        
    <tr 
    class="rightTableItemColor"><BR>                                                            
    <td><BR>                                                                
    Passsengers<BR>                                                            
    </td><BR>                                                            
    <td><BR>                                                                
    Adult: 2<br 
    /><BR>                                                                
    Children 13-17 : 2<br 
    /><BR>                                                                
    Dog : 
    1<BR>                                                            
    </td><BR>                                                            
    <td><BR>                                                                
    &nbsp;<BR>                                                            
    </td><BR>                                                        
    </tr><BR>                                                        
    <tr 
    class="rightTableAlternateColor"><BR>                                                            
    <td><BR>                                                                
    Products on 
    card<BR>                                                            
    </td><BR>                                                            
    <td><BR>                                                                
    Season 
    pass<BR>                                                            
    </td><BR>                                                            
    <td><BR>                                                                
    <a href="#">View 
    details</a><BR>                                                            
    </td><BR>                                                        
    </tr><BR>                                                        
    <tr 
    class="rightTableItemColor"><BR>                                                            
    <td><BR>                                                                
    Current<BR>                                                                
    <br 
    /><BR>                                                                
    discount 
    level<BR>                                                            
    </td><BR>                                                            
    <td><BR>                                                                
    East: 
    4<BR>                                                                
    <br 
    /><BR>                                                                
    West: 2<br 
    /><BR>                                                                
    Across : 
    0<BR>                                                            
    </td><BR>                                                            
    <td 
    valign="top"><BR>                                                                
    <a href="#">View discount 
    details</a><BR>                                                            
    </td><BR>                                                        
    </tr><BR>                                                        
    <tr 
    class="rightTableAlternateColor"><BR>                                                            
    <td><BR>                                                                
    Until 
    :<BR>                                                            
    </td><BR>                                                            
    <td><BR>                                                                
    30-09-2011<BR>                                                            
    </td><BR>                                                            
    <td><BR>                                                                
    &nbsp;<BR>                                                            
    </td><BR>                                                        
    </tr><BR>                                                        
    <tr><BR>                                                            
    <td 
    colspan="3"><BR>                                                                
    &nbsp;<BR>                                                            
    </td><BR>                                                        
    </tr><BR>                                                    
    </table><BR>                                                
    </div><BR>                                            
    </td><BR>                                        
    </tr><BR>                                    
    </table><BR>                                
    </div><BR>                            
    </ItemTemplate><BR>                        
    </telerik:RadPanelItem><BR>                    
    </Items><BR>                
    </telerik:RadPanelItem><BR>                
    <telerik:RadPanelItem ImageUrl="Styles/Images/1318514913_clean.png" 
    Text="Henrik Hansen - 
    Person"<BR>                    
    Expanded="false" CssClass="roundedRadPanelItem" 
    AccessKey="2"><BR>                    
    <Items><BR>                        
    <telerik:RadPanelItem><BR>                            
    <ItemTemplate><BR>                                
    <div 
    class="dashboardPanelbarItems"><BR>                                    
    <table 
    class="mainTable"><BR>                                        
    <tr><BR>                                            
    <td style="width: 
    50%"><BR>                                                
    <div 
    class="divRadPanelItemLeft"><BR>                                                    
    <span 
    class="spanRadPanelItemLegend">CARD</span><BR>                                                    
    <table cellspacing="0" width="90%" 
    class="leftTable"><BR>                                                        
    <tr 
    class="leftTableItemColor"><BR>                                                            
    <td><BR>                                                                
    Balance<BR>                                                            
    </td><BR>                                                            
    <td><BR>                                                                
    300 
    kr.<BR>                                                            
    </td><BR>                                                            
    <td><BR>                                                                
    <a href="#">Reload 
    Saldo</a><BR>                                                                
    <br 
    /><BR>                                                                
    <a href="#">Saldo 
    modification</a><BR>                                                            
    </td><BR>                                                        
    </tr><BR>                                                        
    <tr 
    class="leftTableAlternateColor"><BR>                                                            
    <td><BR>                                                                
    Expiry 
    date<BR>                                                            
    </td><BR>                                                            
    <td><BR>                                                                
    14-06-2012<BR>                                                            
    </td><BR>                                                            
    <td><BR>                                                                
    &nbsp;<BR>                                                            
    </td><BR>                                                        
    </tr><BR>                                                        
    <tr 
    class="leftTableItemColor"><BR>                                                            
    <td><BR>                                                                
    Reload 
    contract<BR>                                                            
    </td><BR>                                                            
    <td><BR>                                                                
    300 kr.<br 
    /><BR>                                                                
    Min. 50 kr.<br 
    /><BR>                                                                
    daglige<BR>                                                            
    </td><BR>                                                            
    <td><BR>                                                                
    &nbsp;<BR>                                                            
    </td><BR>                                                        
    </tr><BR>                                                        
    <tr><BR>                                                            
    <td 
    colspan="3"><BR>                                                                
    &nbsp;<BR>                                                            
    </td><BR>                                                        
    </tr><BR>                                                        
    <tr><BR>                                                            
    <td colspan="3" 
    align="right"><BR>                                                                
    <telerik:RadButton ID="btnViewEditCard" runat="server" Text="View / Edit 
    card" 
    EnableEmbeddedSkins="false"<BR>                                                                    
    Skin="ThalesSkin" OnClick="btnViewEditCard_Click" CommandArgument="2" 
    AccessKey="n" 
    /><BR>                                                            
    </td><BR>                                                        
    </tr><BR>                                                        
    <tr><BR>                                                            
    <td 
    colspan="3"><BR>                                                                
    &nbsp;<BR>                                                            
    </td><BR>                                                        
    </tr><BR>                                                    
    </table><BR>                                                
    </div><BR>                                            
    </td><BR>                                            
    <td style="width: 
    50%"><BR>                                                
    <div 
    class="divRadPanelItemRight"><BR>                                                    
    <span 
    class="spanRadPanelItemLegend">SETTINGS</span><BR>                                                    
    <table cellspacing="0" width="90%" 
    class="rightTable"><BR>                                                        
    <tr 
    class="rightTableItemColor"><BR>                                                            
    <td><BR>                                                                
    Passsengers<BR>                                                            
    </td><BR>                                                            
    <td><BR>                                                                
    Adult: 2<br 
    /><BR>                                                                
    Children 13-17 : 2<br 
    /><BR>                                                                
    Dog : 
    1<BR>                                                            
    </td><BR>                                                            
    <td><BR>                                                                
    &nbsp;<BR>                                                            
    </td><BR>                                                        
    </tr><BR>                                                        
    <tr 
    class="rightTableAlternateColor"><BR>                                                            
    <td><BR>                                                                
    Products on 
    card<BR>                                                            
    </td><BR>                                                            
    <td><BR>                                                                
    Season 
    pass<BR>                                                            
    </td><BR>                                                            
    <td><BR>                                                                
    <a href="#">View 
    details</a><BR>                                                            
    </td><BR>                                                        
    </tr><BR>                                                        
    <tr 
    class="rightTableItemColor"><BR>                                                            
    <td><BR>                                                                
    Current<BR>                                                                
    <br 
    /><BR>                                                                
    discount 
    level<BR>                                                            
    </td><BR>                                                            
    <td><BR>                                                                
    East: 
    4<BR>                                                                
    <br 
    /><BR>                                                                
    West: 2<br 
    /><BR>                                                                
    Across : 
    0<BR>                                                            
    </td><BR>                                                            
    <td 
    valign="top"><BR>                                                                
    <a href="#">View discount 
    details</a><BR>                                                            
    </td><BR>                                                        
    </tr><BR>                                                        
    <tr 
    class="rightTableAlternateColor"><BR>                                                            
    <td><BR>                                                                
    Until 
    :<BR>                                                            
    </td><BR>                                                            
    <td><BR>                                                                
    30-09-2011<BR>                                                            
    </td><BR>                                                            
    <td><BR>                                                                
    &nbsp;<BR>                                                            
    </td><BR>                                                        
    </tr><BR>                                                        
    <tr><BR>                                                            
    <td 
    colspan="3"><BR>                                                                
    &nbsp;<BR>                                                            
    </td><BR>                                                        
    </tr><BR>                                                    
    </table><BR>                                                
    </div><BR>                                            
    </td><BR>                                        
    </tr><BR>                                    
    </table><BR>                                
    </div><BR>                            
    </ItemTemplate><BR>                        
    </telerik:RadPanelItem><BR>                    
    </Items><BR>                
    </telerik:RadPanelItem><BR>                
    <telerik:RadPanelItem ImageUrl="Styles/Images/1318514913_clean.png" 
    Text="Henrik Hansen - 
    Person"<BR>                    
    Expanded="false" CssClass="roundedRadPanelItem" 
    AccessKey="3"><BR>                    
    <Items><BR>                        
    <telerik:RadPanelItem><BR>                            
    <ItemTemplate><BR>                                
    <div 
    class="dashboardPanelbarItems"><BR>                                    
    <table 
    class="mainTable"><BR>                                        
    <tr><BR>                                            
    <td style="width: 
    50%"><BR>                                                
    <div 
    class="divRadPanelItemLeft"><BR>                                                    
    <span 
    class="spanRadPanelItemLegend">CARD</span><BR>                                                    
    <table cellspacing="0" width="90%" 
    class="leftTable"><BR>                                                        
    <tr 
    class="leftTableItemColor"><BR>                                                            
    <td><BR>                                                                
    Balance<BR>                                                            
    </td><BR>                                                            
    <td><BR>                                                                
    300 
    kr.<BR>                                                            
    </td><BR>                                                            
    <td><BR>                                                                
    <a href="#">Reload 
    Saldo</a><BR>                                                                
    <br 
    /><BR>                                                                
    <a href="#">Saldo 
    modification</a><BR>                                                            
    </td><BR>                                                        
    </tr><BR>                                                        
    <tr 
    class="leftTableAlternateColor"><BR>                                                            
    <td><BR>                                                                
    Expiry 
    date<BR>                                                            
    </td><BR>                                                            
    <td><BR>                                                                
    14-06-2012<BR>                                                            
    </td><BR>                                                            
    <td><BR>                                                                
    &nbsp;<BR>                                                            
    </td><BR>                                                        
    </tr><BR>                                                        
    <tr 
    class="leftTableItemColor"><BR>                                                            
    <td><BR>                                                                
    Reload 
    contract<BR>                                                            
    </td><BR>                                                            
    <td><BR>                                                                
    300 kr.<br 
    /><BR>                                                                
    Min. 50 kr.<br 
    /><BR>                                                                
    daglige<BR>                                                            
    </td><BR>                                                            
    <td><BR>                                                                
    &nbsp;<BR>                                                            
    </td><BR>                                                        
    </tr><BR>                                                        
    <tr><BR>                                                            
    <td 
    colspan="3"><BR>                                                                
    &nbsp;<BR>                                                            
    </td><BR>                                                        
    </tr><BR>                                                        
    <tr><BR>                                                            
    <td colspan="3" 
    align="right"><BR>                                                                
    <telerik:RadButton ID="btnViewEditCard" runat="server" Text="View / Edit 
    card" 
    EnableEmbeddedSkins="false"<BR>                                                                    
    Skin="ThalesSkin" OnClick="btnViewEditCard_Click" CommandArgument="3" 
    AccessKey="n" 
    /><BR>                                                            
    </td><BR>                                                        
    </tr><BR>                                                        
    <tr><BR>                                                            
    <td 
    colspan="3"><BR>                                                                
    &nbsp;<BR>                                                            
    </td><BR>                                                        
    </tr><BR>                                                    
    </table><BR>                                                
    </div><BR>                                            
    </td><BR>                                            
    <td style="width: 
    50%"><BR>                                                
    <div 
    class="divRadPanelItemRight"><BR>                                                    
    <span 
    class="spanRadPanelItemLegend">SETTINGS</span><BR>                                                    
    <table cellspacing="0" width="90%" 
    class="rightTable"><BR>                                                        
    <tr 
    class="rightTableItemColor"><BR>                                                            
    <td><BR>                                                                
    Passsengers<BR>                                                            
    </td><BR>                                                            
    <td><BR>                                                                
    Adult: 2<br 
    /><BR>                                                                
    Children 13-17 : 2<br 
    /><BR>                                                                
    Dog : 
    1<BR>                                                            
    </td><BR>                                                            
    <td><BR>                                                                
    &nbsp;<BR>                                                            
    </td><BR>                                                        
    </tr><BR>                                                        
    <tr 
    class="rightTableAlternateColor"><BR>                                                            
    <td><BR>                                                                
    Products on 
    card<BR>                                                            
    </td><BR>                                                            
    <td><BR>                                                                
    Season 
    pass<BR>                                                            
    </td><BR>                                                            
    <td><BR>                                                                
    <a href="#">View 
    details</a><BR>                                                            
    </td><BR>                                                        
    </tr><BR>                                                        
    <tr 
    class="rightTableItemColor"><BR>                                                            
    <td><BR>                                                                
    Current<BR>                                                                
    <br 
    /><BR>                                                                
    discount 
    level<BR>                                                            
    </td><BR>                                                            
    <td><BR>                                                                
    East: 
    4<BR>                                                                
    <br 
    /><BR>                                                                
    West: 2<br 
    /><BR>                                                                
    Across : 
    0<BR>                                                            
    </td><BR>                                                            
    <td 
    valign="top"><BR>                                                                
    <a href="#">View discount 
    details</a><BR>                                                            
    </td><BR>                                                        
    </tr><BR>                                                        
    <tr 
    class="rightTableAlternateColor"><BR>                                                            
    <td><BR>                                                                
    Until 
    :<BR>                                                            
    </td><BR>                                                            
    <td><BR>                                                                
    30-09-2011<BR>                                                            
    </td><BR>                                                            
    <td><BR>                                                                
    &nbsp;<BR>                                                            
    </td><BR>                                                        
    </tr><BR>                                                        
    <tr><BR>                                                            
    <td 
    colspan="3"><BR>                                                                
    &nbsp;<BR>                                                            
    </td><BR>                                                        
    </tr><BR>                                                    
    </table><BR>                                                
    </div><BR>                                            
    </td><BR>                                        
    </tr><BR>                                    
    </table><BR>                                
    </div><BR>                            
    </ItemTemplate><BR>                        
    </telerik:RadPanelItem><BR>                    
    </Items><BR>                
    </telerik:RadPanelItem>            
    <BR>            
    </Items><BR>        
    </telerik:RadPanelBar>      
    <BR>        
    <div><BR>            
    <asp:Panel runat="server" 
    ID="pnlPager"><BR>                
    <asp:HyperLink ID="hlPrevious" Text="Previous" runat="server" NavigateUrl="#" 
    Visible="false"></asp:HyperLink><BR>                
    <asp:HyperLink ID="hlNext" Text="Next" runat="server" NavigateUrl="#" 
    Visible="false"></asp:HyperLink><BR>            
    </asp:Panel><BR>        
    </div><BR>    </div></P>
    <P>    <script language="javascript" 
    type="text/javascript"></P>
    <P>        function telerikModifications() 
    {<BR>            /* Add 
    images */<BR>            
    var panelbar = document.getElementById("<%= panelBarDashboard.ClientID 
    %>");<BR>            
    var spanItems = 
    panelbar.getElementsByTagName("span");<BR>            
    var Images = 
    "<%=Images%>"<BR>            
    var ImagesCount = 
    -1;<BR>            var 
    arrImages = 
    Images.split(",")<BR>            
    var i = 0;<BR>            
    for (i = 0; i < spanItems.length; i++) 
    {<BR>                
    if (spanItems[i].className == "<%=rpOut %>") 
    {<BR>                    
    ImagesCount++;<BR>                    
    spanItems[i].innerHTML = spanItems[i].innerHTML + 
    arrImages[ImagesCount];<BR>                
    }</P>
    <P>                
    if (spanItems[i].className == "<%=rpText%>") 
    {<BR>                    
    spanItems[i].className = 
    "";<BR>                
    }<BR>            }</P>
    <P>            /* Add 
    Legends */<BR>            
    /* <div class='roundedPanelItemLegend'>TEST TEST</div>,<div 
    class='roundedPanelItemLegend'>TEST Test Test</div>,<div 
    class='roundedPanelItemLegend'>TEST Test</div> should be 
    dynamically<BR>            
    created as shown above for the "Images" 
    variable*/<BR>            
    var ulItems = 
    panelbar.getElementsByTagName("ul");<BR>            
    i = 0;<BR>            for 
    (i = 0; i < ulItems.length; i++) 
    {<BR>                
    if (ulItems[i].className.indexOf("rpRootGroup") != -1) 
    {<BR>                    
    var liItems = 
    ulItems[i].getElementsByTagName("li");<BR>                    
    var lis = 
    "<%=Legends%>"<BR>                    
    var lisCount = 
    -1;<BR>                    
    var arrlis = 
    lis.split(",")<BR>                    
    var x = 
    0;<BR>                    
    for (x = 0; x < liItems.length; x++) 
    {<BR>                        
    if (liItems[x].className == "rpItem rpFirst" || liItems[x].className == "rpItem" 
    || liItems[x].className == "rpItem rpLast") 
    {<BR>                            
    lisCount++;<BR>                            
    liItems[x].innerHTML = arrlis[lisCount] + 
    liItems[x].innerHTML;<BR>                        
    }<BR>                    
    }</P>
    <P>                
    }<BR>            
    }<BR>        }</P>
    <P><BR>        function 
    telerikRadButtonModifications() 
    {<BR>            var 
    radPanel = document.getElementById("<%= panelBarDashboard.ClientID 
    %>");<BR>            
    var atags = 
    radPanel.getElementsByTagName("a");<BR>            
    i = 0;<BR>            for 
    (i = 0; i < atags.length; i++) 
    {<BR>                
    if (atags[i].className.indexOf("RadButton") != -1) 
    {<BR>                    
    atags[i].removeAttribute("href");<BR>                    
    var 
    tindex;<BR>                    
    tindex = 
    atags[i].tabIndex;<BR>                    
    var 
    button;<BR>                    
    button = 
    atags[i].getElementsByTagName("input")[0];<BR>                    
    button.setAttribute("tabIndex", 
    tindex);<BR>                
    }<BR>            
    }<BR>        }</P>
    <P>     </P>
    <P>    </script><BR>    <script 
    type="text/javascript" 
    src="Scripts/Telerik.js?<%=Guid%>"></script><BR></asp:Content><BR></P><BR><BR>

    Here is the code-behind used...

    panelBarDashboard.DataTextField = 
    "CardDisplayId";<BR>panelBarDashboard.DataFieldID = 
    "CardInternalId";<BR>panelBarDashboard.DataFieldParentID = 
    "ParentID";            
    <BR>panelBarDashboard.DataSource = 
    cardsDisplayed;<BR>panelBarDashboard.DataBind();<BR><BR>
    Awaiting your valudable inputs.

    Thanks & regards
    Clement

  2. Kate
    Admin
    Kate avatar
    1898 posts

    Posted 07 Dec 2011 Link to this post

    Hi Clement,

    I noticed that you opened two forum posts with questions considering one and the same issue. Please refer to the post that I have already answered below:
    http://www.telerik.com/community/forums/aspnet-ajax/panelbar/r.aspx

    Greetings,
    Kate
    the Telerik team
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now
  3. UI for ASP.NET Ajax is Ready for VS 2017
Back to Top