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

RadPanelBar Rendering

2 Answers 80 Views

PanelBar

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

Clement asked on 05 Dec 2011, 06:20 PM

Expected.png

Unexpected.png

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.

<%@ Page Title="" Language="C#" MasterPageFile="~/boris.Master"

AutoEventWireup="true" 

CodeBehind="rejsekort_GUI_underside.aspx.cs"

Inherits="Boris.rejsekort_GUI_underside" %>

<asp:Content ID="Content1" ContentPlaceHolderID="bottom"

runat="server"> <div

class="dashboardPanelbar"> 

<telerik:RadPanelBar ID="panelBarDashboard" runat="server" Width="100%"

EnableEmbeddedSkins="false" 

OnItemDataBound="panelBarDashboard_ItemDataBound" Skin="None"

OnPreRender="panelBarDashboard_PreRender" 

CollapseDelay="100" ExpandDelay="100" BorderStyle="None"

ExpandMode="SingleExpandedItem"

AllowCollapseAllItems="true"> 

<Items> 

<telerik:RadPanelItem ImageUrl="Styles/Images/1318514913_clean.png"

Text="Henrik Hansen -

Person" 

Expanded="true" CssClass="roundedRadPanelItemFirst"

AccessKey="1"> 

<Items> 

<telerik:RadPanelItem> 

<ItemTemplate> 

<div

class="dashboardPanelbarItems"> 

<table

class="mainTable"> 

<tr> 

<td style="width:

50%"> 

<div

class="divRadPanelItemLeft"> 

<span

class="spanRadPanelItemLegend">CARD 

<table cellspacing="0" width="90%"

class="leftTable"> 

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

</tr> 

<tr

class="leftTableAlternateColor"><BR

<td><BR

Expiry

date<BR

</td><BR

<td><BR

14-06-2012<BR

</td><BR

<td><BR

 <BR

</td> 

</tr> 

<tr

class="leftTableItemColor"><BR

<td><BR

Reload

contract<BR

</td><BR

<td><BR

300 kr.<br

/><BR

Min. 50 kr.<br

/><BR

2

daglige<BR

</td><BR

<td><BR

 <BR

</td> 

</tr> 

<tr><BR

<td

colspan="3"><BR

 <BR

</td> 

</tr> 

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

</tr> 

<tr><BR

<td

colspan="3"><BR

 <BR

</td> 

</tr> 

</table> 

</div> 

</td> 

<td style="width:

50%"> 

<div

class="divRadPanelItemRight"> 

<span

class="spanRadPanelItemLegend">SETTINGS 

<table cellspacing="0" width="90%"

class="rightTable"> 

<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

 <BR

</td> 

</tr> 

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

</tr> 

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

</tr> 

<tr

class="rightTableAlternateColor"><BR

<td><BR

Until

:<BR

</td><BR

<td><BR

30-09-2011<BR

</td><BR

<td><BR

 <BR

</td> 

</tr> 

<tr><BR

<td

colspan="3"><BR

 <BR

</td> 

</tr> 

</table> 

</div> 

</td> 

</tr> 

</table> 

</div> 

</ItemTemplate> 

</telerik:RadPanelItem> 

</Items> 

</telerik:RadPanelItem> 

<telerik:RadPanelItem ImageUrl="Styles/Images/1318514913_clean.png"

Text="Henrik Hansen -

Person" 

Expanded="false" CssClass="roundedRadPanelItem"

AccessKey="2"> 

<Items> 

<telerik:RadPanelItem> 

<ItemTemplate> 

<div

class="dashboardPanelbarItems"> 

<table

class="mainTable"> 

<tr> 

<td style="width:

50%"> 

<div

class="divRadPanelItemLeft"> 

<span

class="spanRadPanelItemLegend">CARD 

<table cellspacing="0" width="90%"

class="leftTable"> 

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

</tr> 

<tr

class="leftTableAlternateColor"><BR

<td><BR

Expiry

date<BR

</td><BR

<td><BR

14-06-2012<BR

</td><BR

<td><BR

 <BR

</td> 

</tr> 

<tr

class="leftTableItemColor"><BR

<td><BR

Reload

contract<BR

</td><BR

<td><BR

300 kr.<br

/><BR

Min. 50 kr.<br

/><BR

2

daglige<BR

</td><BR

<td><BR

 <BR

</td> 

</tr> 

<tr><BR

<td

colspan="3"><BR

 <BR

</td> 

</tr> 

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

</tr> 

<tr><BR

<td

colspan="3"><BR

 <BR

</td> 

</tr> 

</table> 

</div> 

</td> 

<td style="width:

50%"> 

<div

class="divRadPanelItemRight"> 

<span

class="spanRadPanelItemLegend">SETTINGS 

<table cellspacing="0" width="90%"

class="rightTable"> 

<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

 <BR

</td> 

</tr> 

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

</tr> 

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

</tr> 

<tr

class="rightTableAlternateColor"><BR

<td><BR

Until

:<BR

</td><BR

<td><BR

30-09-2011<BR

</td><BR

<td><BR

 <BR

</td> 

</tr> 

<tr><BR

<td

colspan="3"><BR

 <BR

</td> 

</tr> 

</table> 

</div> 

</td> 

</tr> 

</table> 

</div> 

</ItemTemplate> 

</telerik:RadPanelItem> 

</Items> 

</telerik:RadPanelItem> 

<telerik:RadPanelItem ImageUrl="Styles/Images/1318514913_clean.png"

Text="Henrik Hansen -

Person" 

Expanded="false" CssClass="roundedRadPanelItem"

AccessKey="3"> 

<Items> 

<telerik:RadPanelItem> 

<ItemTemplate> 

<div

class="dashboardPanelbarItems"> 

<table

class="mainTable"> 

<tr> 

<td style="width:

50%"> 

<div

class="divRadPanelItemLeft"> 

<span

class="spanRadPanelItemLegend">CARD 

<table cellspacing="0" width="90%"

class="leftTable"> 

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

</tr> 

<tr

class="leftTableAlternateColor"><BR

<td><BR

Expiry

date<BR

</td><BR

<td><BR

14-06-2012<BR

</td><BR

<td><BR

 <BR

</td> 

</tr> 

<tr

class="leftTableItemColor"><BR

<td><BR

Reload

contract<BR

</td><BR

<td><BR

300 kr.<br

/><BR

Min. 50 kr.<br

/><BR

2

daglige<BR

</td><BR

<td><BR

 <BR

</td> 

</tr> 

<tr><BR

<td

colspan="3"><BR

 <BR

</td> 

</tr> 

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

</tr> 

<tr><BR

<td

colspan="3"><BR

 <BR

</td> 

</tr> 

</table> 

</div> 

</td> 

<td style="width:

50%"> 

<div

class="divRadPanelItemRight"> 

<span

class="spanRadPanelItemLegend">SETTINGS 

<table cellspacing="0" width="90%"

class="rightTable"> 

<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

 <BR

</td> 

</tr> 

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

</tr> 

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

</tr> 

<tr

class="rightTableAlternateColor"><BR

<td><BR

Until

:<BR

</td><BR

<td><BR

30-09-2011<BR

</td><BR

<td><BR

 <BR

</td> 

</tr> 

<tr><BR

<td

colspan="3"><BR

 <BR

</td> 

</tr> 

</table> 

</div> 

</td> 

</tr> 

</table> 

</div> 

</ItemTemplate> 

</telerik:RadPanelItem> 

</Items> 

</telerik:RadPanelItem>

 

</Items> 

</telerik:RadPanelBar>

 

<div> 

<asp:Panel runat="server"

ID="pnlPager"> 

<asp:HyperLink ID="hlPrevious" Text="Previous" runat="server" NavigateUrl="#"

Visible="false"></asp:HyperLink> 

<asp:HyperLink ID="hlNext" Text="Next" runat="server" NavigateUrl="#"

Visible="false"></asp:HyperLink> 

</asp:Panel> 

</div> </div>

 <script language="javascript"

type="text/javascript">

 function telerikModifications()

{ /* Add

images */ 

var panelbar = document.getElementById("<%= panelBarDashboard.ClientID

%>"); 

var spanItems =

panelbar.getElementsByTagName("span"); 

var Images =

"<%=Images%>" 

var ImagesCount =

-1; var

arrImages =

Images.split(",") 

var i = 0; 

for (i = 0; i < spanItems.length; i++)

{ 

if (spanItems[i].className == "<%=rpOut %>")

{ 

ImagesCount++; 

spanItems[i].innerHTML = spanItems[i].innerHTML +

arrImages[ImagesCount]; 

}

if (spanItems[i].className == "<%=rpText%>")

{ 

spanItems[i].className =

""; 

} }

 /* Add

Legends */ 

/* <div class='roundedPanelItemLegend'>TEST TEST</div>,<div

class='roundedPanelItemLegend'>TEST Test Test</div>,<div

class='roundedPanelItemLegend'>TEST Test</div> should be

dynamically 

created as shown above for the "Images"

variable*/ 

var ulItems =

panelbar.getElementsByTagName("ul"); 

i = 0; for

(i = 0; i < ulItems.length; i++)

{ 

if (ulItems[i].className.indexOf("rpRootGroup") != -1)

{ 

var liItems =

ulItems[i].getElementsByTagName("li"); 

var lis =

"<%=Legends%>" 

var lisCount =

-1; 

var arrlis =

lis.split(",") 

var x =

0; 

for (x = 0; x < liItems.length; x++)

{ 

if (liItems[x].className == "rpItem rpFirst" || liItems[x].className == "rpItem"

|| liItems[x].className == "rpItem rpLast")

{ 

lisCount++; 

liItems[x].innerHTML = arrlis[lisCount] +

liItems[x].innerHTML; 

} 

}

} 

} }

 function

telerikRadButtonModifications()

{ var

radPanel = document.getElementById("<%= panelBarDashboard.ClientID

%>"); 

var atags =

radPanel.getElementsByTagName("a"); 

i = 0; for

(i = 0; i < atags.length; i++)

{ 

if (atags[i].className.indexOf("RadButton") != -1)

{ 

atags[i].removeAttribute("href"); 

var

tindex; 

tindex =

atags[i].tabIndex; 

var

button; 

button =

atags[i].getElementsByTagName("input")[0]; 

button.setAttribute("tabIndex",

tindex); 

} 

} }

 

 </script> <script

type="text/javascript"

src="Scripts/Telerik.js?<%=Guid%>"></script> </asp:Content> 

Here is the code-behind used...

panelBarDashboard.DataTextField =

"CardDisplayId"; panelBarDashboard.DataFieldID =

"CardInternalId"; panelBarDashboard.DataFieldParentID =

"ParentID";

 panelBarDashboard.DataSource =

cardsDisplayed; panelBarDashboard.DataBind(); 

Awaiting your valudable inputs.

Thanks & regards
Clement

Product Bundles

DevCraft

Web

Mobile

Document Management

Desktop

Reporting & Mocking

Automated Testing

CMS

UI/UX Tools

Debugging

Free Tools

Support and Learning

Productivity and Design Tools

RadPanelBar Rendering

2 Answers, 1 is accepted