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

Panelbar inside a ListView

1 Answer 120 Views

PanelBar

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

Raventhorn asked on 28 May 2012, 10:30 PM

I have a DataListView that contains a panelbar and the panelbar contains a textbox and button. I have the ListView bound to a SQL Datasource and the panelbar is not bound to anything. Inside the panel bar I need to set values to these controls using the Eval() command. However, it is returning null. If I move the textbox and button outside of the panelbar they can grab the data no problem. Once inside it's null. I know it's because they're looking for the datasource of the panelbar... is there anyway to override this? I want the textbox and button to get their values from the datasource of the listview.

<telerik:RadListView ID="wall" runat="server" Skin="Metro" AllowPaging="True" PageSize="200"

DataSourceID="WallSource">

<ItemTemplate>

<div class="wallPostPicture">

<telerik:RadBinaryImage ID="imgPosterPic" runat="server" DataValue='<%# Eval("Image") %>'

Height="50px" Width="50px" AutoAdjustImageControlSize="false" CssClass="friend" />

<telerik:RadToolTip ID="WallTip" runat="server" Position="MiddleRight" RelativeTo="Element"

Skin="Metro" TargetControlID="imgPosterPic" ShowEvent="OnMouseOver" HideEvent="LeaveTargetAndToolTip"

Animation="Resize" AutoCloseDelay="0" Title='<%# string.Format("{0} {1}", Eval("FirstName").ToString(), Eval("LastName").ToString())%>'>

<div>

<asp:Label ID="lblStatus" runat="server" Text='<%# Eval("Status") %>' /></div>

</div>

</telerik:RadToolTip>

</div>

<div style="float: right; padding-top: 10px;">

<asp:Label ID="lblCounter" runat="server" Text="0" CssClass="CounterText" ForeColor="LightGray" />

</div>

<div class="wallPostTitle">

<%# string.Format("{0} {1}", Eval("FirstName").ToString(), Eval("LastName").ToString())%></div>

<div class="wallPostDate">

<%# Eval("Date").ToString().ToLower() %></div>

<div class="wallPostDate" style="text-decoration: 'underline'">

<asp:LinkButton ID="lbtnRepost" runat="server" Text="repost" /> <b>·</b> <asp:LinkButton

ID="LinkButton1" runat="server" Text="upvote" /></div>

<div class="wallPostValue">

<%# Eval("Value") %></div>

<div class="wallPostComments">

<telerik:RadPanelBar runat="server" ID="RadPanelBar1" ExpandMode="SingleExpandedItem"

AllowCollapseAllItems="true" Skin="Metro" Width="100%" PersistStateInCookie="true">

<Items>

<telerik:RadPanelItem Text='comments' Expanded="False" runat="server">

<ContentTemplate>

<telerik:RadListView runat="server" ID="listComments" Skin="Metro" AllowPaging="true"

PageSize="15" DataSourceID="commentSource">

<ItemTemplate>

<div class="commentBlock">

<div class="wallPostPicture">

<telerik:RadBinaryImage ID="imgPosterPic" runat="server" DataValue='<%# Eval("Image") %>'

Height="40px" Width="40px" AutoAdjustImageControlSize="false" CssClass="friend" />

</div>

<div class="wallPostTitle">

<%# string.Format("{0} {1}", Eval("FirstName").ToString(), Eval("LastName").ToString())%>

</div>

<div class="wallPostDate">

<%# Eval("Date").ToString() %>

</div>

<div class="wallPostValue">

<%# Eval("Value") %>

</div>

</ItemTemplate>

</telerik:RadListView>

<span style="float: right; padding: 0px 10px 0px 0px;">

<asp:Button ID="btnPostComment" runat="server" CssClass="blueButton" Text="post" CommandArgument='<%# Eval("PostId") %>' OnCommand="btnPostComment_Click" /></span>

<div class="boxStatusmng" style="margin: 5px 0px 10px 0px; padding-left: 10px;">

<span class="bannerStatusMngInput">

<asp:TextBox ID="txtCommentIt" runat="server" CssClass="statusbox" Height="35px" Text='<%# Eval("PostId") %>' /></span>

<asp:HiddenField runat="server" ID="hideWallId" Value='<%# Eval("PostId") %>' />

<ajaxToolkit:TextBoxWatermarkExtender ID="wmComment" runat="server" TargetControlID="txtCommentIt"

WatermarkCssClass="statusboxwm" WatermarkText="say something..." />

</div>

</ContentTemplate>

</telerik:RadPanelItem>

</Items>

</telerik:RadPanelBar>

</div>

<asp:SqlDataSource runat="server" ID="commentSource" ConnectionString="<%$ ConnectionStrings:MySqlConnection %>"

SelectCommand='<%# string.Format("SELECT * FROM Comments, UserDetails WHERE PostTargetId = {0} AND UserDetails.UserId = Comments.PosterUserId",  Eval("PostId")) %>' />

</ItemTemplate>

</telerik:RadListView>

<asp:SqlDataSource ID="WallSource" runat="server" ConnectionString="<%$ ConnectionStrings:MySqlConnection %>"

SelectCommand="SELECT FirstName, LastName, Status, Image, Poster, Value, Date, WallUserId, PostId FROM UserDetails, Wall WHERE Wall.WallUserId = @WallUserId AND UserDetails.UserId = Wall.Poster ORDER BY Wall.Date DESC">

<SelectParameters>

<asp:ControlParameter ControlID="hideme" Name="WallUserId" PropertyName="Value" Type="String" />

</SelectParameters>

</asp:SqlDataSource>

<asp:HiddenField ID="hideme" runat="server" />

1 Answer, 1 is accepted

answered on 31 May 2012, 02:10 PM

PopulatePanelBarControlsInListView.zip

Hello Shannon,

Your assumption is correct - you cannot bind controls inside RadPanelBar because the latter is a naming container and it also has to be data-binded.

If the nested RadPanelBar is declaratively defined in ItemTemplate of RadListView, then you can use the following workaround - handle ItemDataBound of RadListView to find the controls inside RadPanelBar and populate their properties using the DataItem property of the listview item. Here is an example:

<telerik:RadListView ID="wall" runat="server" Skin="Metro" OnItemDataBound="wall_ItemDataBound">

<ItemTemplate>

<div class="wallPostValue">

<%# Eval("Value") %></div>

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

<Items>

<telerik:RadPanelItem runat="server" Text="Text">

<ContentTemplate>

Text:

<asp:literal id="LiteralText" runat="server"></asp:literal>

</ContentTemplate>

</telerik:RadPanelItem>

<telerik:RadPanelItem runat="server" Text="Value">

<ContentTemplate>

Value:

<asp:literal id="LiteralValue" runat="server"></asp:literal>

</ContentTemplate>

</telerik:RadPanelItem>

</Items>

</telerik:RadPanelBar>

</ItemTemplate>

</telerik:RadListView>

private DataTable CreateTestTable()

{

DataTable table = new DataTable();

table.Columns.Add("ID");

table.Columns.Add("Text");

table.Columns.Add("Value");

table.Rows.Add(new string[] { "1", "1", "A"});

table.Rows.Add(new string[] { "2", "2", "B"});

table.Rows.Add(new string[] { "3", "3", "C"});

table.Rows.Add(new string[] { "4", "4", "D"});

return table;

}

protected void Page_Load(object sender, EventArgs e)

{

if (!IsPostBack)

{

wall.DataSource = CreateTestTable();

wall.DataBind();

}

protected void wall_ItemDataBound(object sender, Telerik.Web.UI.RadListViewItemEventArgs e)

{

RadListViewDataItem currentItem = e.Item as RadListViewDataItem;

DataRowView row = (DataRowView)currentItem.DataItem;

RadPanelBar panelbar = e.Item.FindControl("RadPanelBar1") as RadPanelBar;

Literal textLiteral = panelbar.FindItemByText("Text").FindControl("LiteralText") as Literal;

textLiteral.Text = row["Text"].ToString();

Literal valueLiteral = panelbar.FindItemByText("Value").FindControl("LiteralValue") as Literal;

valueLiteral.Text = row["Value"].ToString();

}

Attached is a sample for reference.

All the best,
Peter
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.