Skip Navigation LinksHome / Community & Support / Developer Productivity Tools Forums / ASP.NET AJAX > PanelBar > Panel Bar will not collapse

Not answered Panel Bar will not collapse

Feed from this thread
  • Michael avatar

    Posted on Jan 13, 2012 (permalink)

    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();

    Reply

  • Kate Kate admin's avatar

    Posted on Jan 17, 2012 (permalink)

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

    Reply

  • Michael avatar

    Posted on Jan 17, 2012 (permalink)

    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>

     

    Reply

  • Kate Kate admin's avatar

    Posted on Jan 18, 2012 (permalink)

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

    Reply

  • Michael avatar

    Posted on Jan 18, 2012 (permalink)

    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();

    Reply

  • Kate Kate admin's avatar

    Posted on Jan 20, 2012 (permalink)

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

    Reply

  • Michael avatar

    Posted on Feb 1, 2012 (permalink)

    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;

     

    }

    }


    Reply

  • Kate Kate admin's avatar

    Posted on Feb 6, 2012 (permalink)

    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
    Sharpen your .NET Ninja skills! Attend Q1 webinar week and get a chance to win a license! Book your seat now >>

    Reply

  • Michael avatar

    Posted on Feb 10, 2012 (permalink)

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

    Thanks again...

    Reply

Back to Top

Skip Navigation LinksHome / Community & Support / Developer Productivity Tools Forums / ASP.NET AJAX > PanelBar > Panel Bar will not collapse
Related resources for "Panel Bar will not collapse"

[  ASP.NET PanelBar Features  |  Documentation  |  Demos  |  Telerik TV  |  Self-Paced Trainer  |  Step-by-step Tutorial  ]