Unable to collapse PanelBar

[Jo]

I have been trying for a couple of days now to get my PanelBar working with databound items, where the item template consists of a user control.  Here is my code:

<telerik:RadPanelBar runat="server" ID="pbSupplierAgreements" AllowCollapseAllItems="true"                 OnItemDataBound="pbSupplierAgreements_ItemDataBound" ExpandMode="SingleExpandedItem"                        Width="100%" DataValueField="ID" DataTextField="SupplierCode" DataTextFormatString="Supplier: {0}">
  <ItemTemplate>
    <telerik:RadPanelItem>
      <Items>
        <telerik:RadPanelItem>
          <ItemTemplate>
            <e:SupplierAgreementView ID="SupplierView" runat="server" />
          </ItemTemplate>
        </telerik:RadPanelItem>
      </Items>
    </telerik:RadPanelItem>
  </ItemTemplate>
</telerik:RadPanelBar>

When the OnItemDataBound is called I bind the data item to the SupplierAgreementView control.

The problem is that this renders the control and data ok , but the panel bar items are all expanded but I can't collapse them and there is no collapse button on the panel bar item headers.

Please help!

[Chris]

Hi

I'm having pretty much the same issue. Here is my code:

<e:EnumDataSource ID="EnumSource" runat="server" EnumerationTypeName="ExternalContractSupportAPI.Entities.EcsStatus" />

    <t:RadPanelBar ID="TermsPanelBar" runat="server" DataTextField="Name" DataSourceID="EnumSource" ExpandMode="SingleExpandedItem">
        <Items>
            <t:RadPanelItem Expanded="true">
                <ContentTemplate>
                    OK: <%#Eval("Name")%>
                </ContentTemplate>
            </t:RadPanelItem>
        </Items>
    </t:RadPanelBar>

The result looks like the attached image: the headers populate correctly but no content is generated.

Any help would be appreciated!

Chris

[Yana]

Hi Chris,

You cannot set content template globally when the panelbar is databound - in this case the template should be set at runtime. I've attached a simple page to demonstrate the approach, please download it and give it a try.

Regards,
Yana
the Telerik team

[Yana]

Hello Jo,

The reason for this is that you're using templates on the root items.

You should either use item template on the child items or content template on the root items as demonstrated in the example here.

Regards,
Yana
the Telerik team

[Jo]

Hello Yana,

Thanks for replying so promptly!  I have tried changing my items as you suggested but I must be doing something wrong.  I have removed by user control and just put a label in the content template to simplify things.  Here is my code now:

<telerik:RadPanelBar runat="server" ID="pbSupplierAgreements" AllowCollapseAllItems="true" OnItemDataBound="pbSupplierAgreements_ItemDataBound" ExpandMode="SingleExpandedItem" Width="100%" DataValueField="ID">
  <Items>
    <telerik:RadPanelItem>
      <HeaderTemplate>
        Supplier
      </HeaderTemplate>
      <ContentTemplate>
        <telerik:RadPanelItem>
          <ItemTemplate>
            <asp:Label ID="lblSupplierContact" runat="server" Text='<%# Eval("SupplierContact") %>'></asp:Label>
          </ItemTemplate>
        </telerik:RadPanelItem>
      </ContentTemplate>
    </telerik:RadPanelItem>
  </Items>
</telerik:RadPanelBar>

In my code behind I am setting the data source of the panel to be an IList<myComplexType> and calling DataBind().  But when the page loads I just see two collapsed items, with the name of the type as the header.  The label is not rendered either and I can't expand the items.

[Yana]

Hello Jo,

You shouldn't place RadPanelItem in the content template - you can directly place the controls:

<telerik:RadPanelBar runat="server" ID="pbSupplierAgreements" AllowCollapseAllItems="true"
    OnItemDataBound="pbSupplierAgreements_ItemDataBound" ExpandMode="SingleExpandedItem"
    Width="100%" DataValueField="ID">
    <Items>
        <telerik:RadPanelItem>
            <HeaderTemplate>
                Supplier
            </HeaderTemplate>
            <ContentTemplate>
                <asp:Label ID="lblSupplierContact" runat="server" Text='<%# Eval("SupplierContact") %>'></asp:Label>
            </ContentTemplate>
        </telerik:RadPanelItem>
    </Items>
</telerik:RadPanelBar>

Best wishes,
Yana
the Telerik team

[Manager]

Hi ,

I also had the same problem like Jo and Chris - the content of the panel bar not generated,

I tried the solution that tells to set the content template at run time , but still the content isn't generated ,

(if using itemtemplate instead of contenttemplate - the content is generated but doesnwt get collapsed which is also bad -  both in client side or in server side)

I would to get a propper solution ,

Thanks.

[Attila Antal]

Hi,

Generally speaking, enabling Templates for a Control will result in avoiding the built-in styles, functionalities, etc. Controls added to the Templates have no effect on the PanelBar's functionality. If the PanelBar is not working, that is likely due to the incorrect configuration of the PanelBar and its Templates.

This is an example of a code showing how the Panelbar behaves by design.

<telerik:RadPanelBar ID="RadPanelBar1" runat="server">
    <Items>
        <telerik:RadPanelItem Text="Item without Content" />
        <telerik:RadPanelItem Text="Item wint a Content">
            <ContentTemplate>
                Item Content
            </ContentTemplate>
        </telerik:RadPanelItem>
        <telerik:RadPanelItem Text="Item with Child Items">
            <Items>
                <telerik:RadPanelItem Text="Child Item with Content">
                    <ContentTemplate>
                        Child Item Content
                    </ContentTemplate>
                </telerik:RadPanelItem>
                <telerik:RadPanelItem Text="Item 2.2"></telerik:RadPanelItem>
            </Items>
        </telerik:RadPanelItem>
        <telerik:RadPanelItem Text="Item with a Content and Custom Header Template">
            <HeaderTemplate>
                Item Header
            </HeaderTemplate>
            <ContentTemplate>
                Item Content
            </ContentTemplate>
        </telerik:RadPanelItem>
        <telerik:RadPanelItem Text="Item with ItemTemplate and HeaderTemplate">
            <HeaderTemplate>
                Item with Header & Item Templates
            </HeaderTemplate>
            <ItemTemplate>
                Item Template
            </ItemTemplate>
        </telerik:RadPanelItem>
    </Items>
</telerik:RadPanelBar>

 

A couple of key points on the Templates:

• To display content in a collapsible panel, use ContentTemplates.
  
• If creating templates dynamically, create everything dynamically, otherwise create everything in the markup.
• Use ItemTemplates only if you'd like to create a custom item replacing the built-in PanelBarItem. Its content and expand/collapse functionality will also need to be implemented.

 

Here is an example of adding custom Content dynamically the proper way:

<asp:Panel ID="Panel1" runat="server"></asp:Panel>

 

C#

protected void Page_Init(object sender, EventArgs e)
{
    var rpb = new RadPanelBar() { ID = "RadPanelBar1", DataFieldID = "ID", DataFieldParentID = "ParentID", DataTextField = "Text", DataValueField = "Value", Width = Unit.Percentage(100) };

    rpb.DataSource = GetData();
    rpb.DataBind();

    foreach (RadPanelItem panelItem in rpb.Items)
    {
        BuildItemsRecursive(panelItem);
    }

    Panel1.Controls.Add(rpb);
}
private void BuildItemsRecursive(RadPanelItem panelItem)
{
    if (panelItem.Items.Count > 0)
    {
        foreach (RadPanelItem childItem in panelItem.Items)
        {
            BuildItemsRecursive(childItem);
        }
    }
    else
    {
        MyContentTemplate contentTemplate = new MyContentTemplate(string.Format("<p>Custom Content for Item <strong>{0}</strong></p>", panelItem.Text));

        panelItem.ContentTemplate = contentTemplate; // set the ContentTemplate
        panelItem.ContentTemplate.InstantiateIn(panelItem); // call the Instantiate function

        panelItem.DataBind(); // bind the item
    }
}
class MyContentTemplate : ITemplate
{
    string _content;
    public MyContentTemplate(string content)
    {
        _content = content;
    }
    public void InstantiateIn(Control container)
    {
        container.Controls.Add(new Literal() { Text = _content });
    }
}
private List<MyObject> GetData()
{
    List<MyObject> objectList = new List<MyObject>();

    objectList.Add(new MyObject() { ID = 1, ParentID = null, Text = "Root Item 1", Value = "R1" });
    objectList.Add(new MyObject() { ID = 2, ParentID = 1, Text = "Child 1 of Root Item 1", Value = "C1R1" });
    objectList.Add(new MyObject() { ID = 3, ParentID = 1, Text = "Child 2 of Root Item 1", Value = "C2R1" });
    objectList.Add(new MyObject() { ID = 4, ParentID = null, Text = "Root Item 2", Value = "R2" });
    objectList.Add(new MyObject() { ID = 5, ParentID = null, Text = "Root Item 3", Value = "R3" });
    objectList.Add(new MyObject() { ID = 6, ParentID = 5, Text = "Child 1 of Root Item 3", Value = "C1R3" });
    objectList.Add(new MyObject() { ID = 7, ParentID = 5, Text = "Child 2 of Root Item 3", Value = "C2R3" });
    objectList.Add(new MyObject() { ID = 8, ParentID = 6, Text = "Child 1 of Child Item 1 of Root Item 3", Value = "C1C1R3" });
    objectList.Add(new MyObject() { ID = 9, ParentID = 6, Text = "Child 2 of Child Item 1 of Root Item 3", Value = "C2C1R3" });

    return objectList;
}
class MyObject
{
    public int ID { get; set; }
    public int? ParentID { get; set; }
    public string Text { get; set; }
    public string Value { get; set; }
}

 

Regards,
Attila Antal
Progress Telerik