Panel Bar will not collapse

[Michael]

Can someone help me determine what is the problem with my code below? Its not expanding.  From reading the following articles, it should.  I think it may have something to do with my databinding....


http://www.telerik.com/help/aspnet/panelbar/panelbar_itemdoesnotcollapseexpand.html
http://www.telerik.com/help/aspnet-ajax/panelbar-troubleshooting-root-items-collapse.html

ASPX:

 

 

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

 

 

 

<Items>

 

 

 

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

 

 

 

<Items>

 

 

 

<telerik:RadPanelItem>

 

 

 

<ItemTemplate>

 

 

 

<table style="width:90%; margin:5px 10px 5px 10px">

 

 

 

<tr style="width:90%">

 

 

 

<td colspan="2" style="width:85%; text-align:left; border:1px solid black"><asp:Label id="lblDetails" runat="server" Text='<%# DataBinder.Eval(Container.DataItem, "Details") %>' /></td>

 

 

 

<td style="width:5%; text-align:right"><asp:ImageButton ID="btnEdit" runat="server" src="../images/ico_Edit.gif"/></td>

 

 

 

</tr>

 

 

 

<tr>

 

 

 

<td style="width:45%; text-align:left">Added By:<asp:Label id="lblAddedBy" runat="server" Text='<%# DataBinder.Eval(Container.DataItem, "AddedBy") %> ' /></td>

 

 

 

<td style="width:45%; text-align:right">Last Updated By:<asp:Label id="lblUpdatedBy" runat="server" Text='<%# DataBinder.Eval(Container.DataItem, "UpdatedBy") %>' /></td>

 

 

 

<td>&nbsp;</td>

 

 

 

</tr>

 

 

 

</table>

 

 

 

</ItemTemplate>

 

 

 

</telerik:RadPanelItem>

 

 

 

</Items>

 

 

 

</telerik:RadPanelItem>

 

 

 

</Items>

 

 

 

</telerik:RadPanelBar>

CS:

 

pbCategory.DataSource = ds;

pbCategory.DataTextField =

 

"LongName";

 

pbCategory.DataValueField =

 

"CategoryCode";

 

 

 

pbCategory.DataFieldParentID = "Id";

 

pbCategory.DataBind();

[Kate]

Hi Michael,

Try to set the Expanded property of the RadPanelItem with text="Root RadPanelItem1" to true:

<telerik:RadPanelItem runat="server" Text="Root RadPanelItem1" Expanded="true">

All the best,
Kate
the Telerik team

[Michael]

I tried that, and its still not expanding:

Here is my latest code:

 

 

<telerik:RadPanelBar ID="pbCategory" runat="server" OnItemDataBound="pbCategory_OnItemDataBound"

 

 

 

Width="100%">

 

 

 

<Items>

 

 

 

<telerik:RadPanelItem Text="Root RadPanelItem1" Expanded="true">

 

 

 

<Items>

 

 

 

<telerik:RadPanelItem>

 

 

 

<ItemTemplate>

 

 

 

<table runat="server" style="width: 90%; margin: 5px 10px 5px 10px">

 

 

 

<tr style="width: 90%">

 

 

 

<td colspan="2" style="width: 85%; text-align: left; border: 1px solid black">

 

 

 

<asp:Label ID="lblDetails" runat="server" Text='<%# DataBinder.Eval(Container.DataItem, "Details") %>' />

 

 

 

</td>

 

 

 

<td style="width: 5%; text-align: right">

 

 

 

<asp:ImageButton ID="btnEdit" runat="server" src="../images/ico_Edit.gif" />

 

 

 

</td>

 

 

 

</tr>

 

 

 

<tr>

 

 

 

<td style="width: 45%; text-align: left">

 

Added By:

 

<asp:Label ID="lblAddedBy" runat="server" Text='<%# DataBinder.Eval(Container.DataItem, "AddedBy") %> ' />

 

 

 

</td>

 

 

 

<td style="width: 45%; text-align: right">

 

Last Updated By:

 

<asp:Label ID="lblUpdatedBy" runat="server" Text='<%# DataBinder.Eval(Container.DataItem, "UpdatedBy") %>' />

 

 

 

</td>

 

 

 

<td>

 

 

 

&nbsp;

 

 

 

</td>

 

 

 

</tr>

 

 

 

</table>

 

 

 

</ItemTemplate>

 

 

 

</telerik:RadPanelItem>

 

 

 

</Items>

 

 

 

</telerik:RadPanelItem>

 

 

 

</Items>

 

 

 

</telerik:RadPanelBar>

 

[Kate]

Hi Michael,

I tested again the code that you provided using both 2011.3.1305.35 and 2012.1.1122.35 versions of the Telerik controls and I am still not able to replicate the problematic behavior. Please see the attached image that demonstrates what I get on my side. I also attached the page that I used for testing. Can you modify it in a way that it demonstrates the issue and send it back to me so I can inspect it locally?

All the best,
Kate
the Telerik team

[Michael]

Hi,

Thanks for looking into this issue.  I think the problem is that I am binding it to a dataset, where you are not.  I was able to successfully do the same thing you are doing now without binding and only showing 1.  But if i bind to a recordset that has multiple rows, I can not expand.  Can you bind to a dataset with multiple rows?  Thanks so much....

CS:

 

pbCategory.DataSource = ds;

pbCategory.DataTextField = "LongName";

pbCategory.DataValueField = "CategoryCode";

pbCategory.DataFieldParentID = "Id";

pbCategory.DataBind();

[Kate]

Hi Michael,

You can find my example in the attached file. Expanding the first PanelItem works as expected from my side. Please give it a try and let me know if this is the desired behavior and how it works when you test it.

Kind regards,
Kate
the Telerik team

[Michael]

Hello,

I'm still having problems with this.  I'm trying to bind to the details, updatedby, and addedby fields.  I took your attached project and modified it:

default.cs;

using

 

 

System;

 

using

 

 

System.Web;

 

using

 

 

System.Web.UI;

 

using

 

 

System.Web.UI.WebControls;

 

using

 

 

System.Data;

 

using

 

 

System.Configuration;

 

using

 

 

System.Web.Security;

 

using

 

 

System.Web.UI.WebControls.WebParts;

 

using

 

 

System.Web.UI.HtmlControls;

 

using

 

 

Telerik.Web.UI;

 

public

 

 

partial class Default : System.Web.UI.Page

 

{

 

 

protected void Page_Load(object sender, EventArgs e)

 

{

 

 

if (!IsPostBack)

 

{

RadPanelBar1.DataSource = CreateTestTable();

 

 

//Establish hierarchy:

 

RadPanelBar1.DataFieldID =

 

"ID";

 

RadPanelBar1.DataFieldParentID =

 

"ParentID";

 

 

 

//Set Text, Value, and NavigateUrl:

 

RadPanelBar1.DataTextField =

 

"Text";

 

RadPanelBar1.DataValueField =

 

"ID";

 

RadPanelBar1.DataBind();

 

 

var item1 = RadPanelBar1.Items[0];

 

item1.Expanded =

 

true;

 

}

}

 

 

protected void pbCategory_ItemDataBound(object sender, Telerik.Web.UI.RadPanelBarEventArgs e)

 

{

}

 

 

private DataTable CreateTestTable()

 

{

 

 

DataTable table = new DataTable();

 

table.Columns.Add(

 

"ID");

 

table.Columns.Add(

 

"ParentID");

 

table.Columns.Add(

 

"Text");

 

table.Columns.Add(

 

"URL");

 

table.Columns.Add(

 

"Tooltip");

 

table.Columns.Add(

 

"Details");

 

table.Columns.Add(

 

"AddedBy");

 

table.Columns.Add(

 

"UpdatedBy");

 

table.Rows.Add(

 

new string[] { "1", null, "root 1", "root 1 tooltip", "test", "mike", "joe" });

 

table.Rows.Add(

 

new string[] { "2", "1", "", "root 1 tooltip", "test", "mike", "joe" });

 

table.Rows.Add(

 

new string[] { "3", null, "root 2", "child 1.1 tooltip", "test", "mike", "joe" });

 

table.Rows.Add(

 

new string[] { "4", "3", "", "child 1.2 tooltip", "test", "mike", "joe" });

 

table.Rows.Add(

 

new string[] { "5", null, "root 3", "child 1.3 tooltip", "test", "mike", "joe" });

 

table.Rows.Add(

 

new string[] { "6", "5", "", "child 1.3.1 tooltip", "test", "mike", "joe" });

 

table.Rows.Add(

 

new string[] { "7", null, "root 4", "child 1.3.2 tooltip", "test", "mike", "joe" });

 

table.Rows.Add(

 

new string[] { "8", "7", "", "child 1.3.3 tooltip", "test", "mike", "joe" });

 

table.Rows.Add(

 

new string[] { "9", null, "root 5", "child 1.3.3 tooltip", "test", "mike", "joe" });

 

table.Rows.Add(

 

new string[] { "10", "9", "", "child 1.3.3 tooltip", "test", "mike", "joe" });

 

table.Rows.Add(

 

new string[] { "11", null, "root 6", "child 1.3.3 tooltip", "test", "mike", "joe" });

 

table.Rows.Add(

 

new string[] { "12", "11", "", "child 1.3.3 tooltip", "test", "mike", "joe" });

 

table.Rows.Add(

 

new string[] { "13", null, "root 7", "child 1.3.3 tooltip", "test", "mike", "joe" });

 

table.Rows.Add(

 

new string[] { "14", "13", "", "child 1.3.3 tooltip", "test", "mike", "joe" });

 

table.Rows.Add(

 

new string[] { "15", null, "root 8", "child 1.3.3 tooltip", "test", "mike", "joe" });

 

table.Rows.Add(

 

new string[] { "16", "15", "", "child 1.3.3 tooltip", "test", "mike", "joe" });

 

table.Rows.Add(

 

new string[] { "17", null, "root 9", "child 1.3.3 tooltip", "test", "mike", "joe" });

 

table.Rows.Add(

 

new string[] { "18", "17", "", "child 1.3.3 tooltip", "test", "mike", "joe" });

 

 

 

return table;

 

}

}

[Kate]

Hello Michael,

The article that you pointed out earlier:
http://www.telerik.com/help/aspnet/panelbar/panelbar_itemdoesnotcollapseexpand.html
refers to the classic ASP.NET controls while the other one refers to the ASP.NET AJAX controls that we currently support. Take a look at the following help article that is related to the ASP.NET AJAX RadPanelBar control and using templates: http://www.telerik.com/help/aspnet-ajax/panelbar-templates-overview.html

Note that as described in point one you can neither expand nor collapse an ItemTemplate in the PanelItem directly. Instead you can use the approach that you found in your second article that you point out - http://www.telerik.com/help/aspnet-ajax/panelbar-troubleshooting-root-items-collapse.html

It is important to know that having the template in the markup and using the OnItemDataBound is not a recommended scenario since the items in the markup will be lost after the event takes place.

So, to sum up, setting the Expanded property to true does take effect but since the templates are lost after the OnItemDataBound event it seems that it does not expand the item with text Root RadPanelItem1

You can, however, use Header and Content templates of the RadPanelBar control and create your templates in code behind. 

Regards,
Kate
the Telerik team

[Michael]

Thanks for your help.  I was able to get this working with your suggestion to use the ContentTemplate.

Thanks again...