can't collapse or expand panel bar w/ itemtemplate

[appdev]

when you have itemtemplate and asp controls you can't coolapse the panel? why is that? if you can please let me know. thanks.

<telerik:RadPanelBar ID="RadPanelBar1" runat="server" Skin="Web20" ExpandMode="fullexpandeditem" OnClientItemClicked="collapseRoots">
                        <Items>
                            <telerik:RadPanelItem  Value="RadPanelBar_CompanyReport" Text="Company Report">
                                <ItemTemplate>
                                    <telerik:RadTextBox ID="txt_test" runat="server" />
                                    <asp:Button ID="btn_Submit" runat="server" Text="Submit" OnClick="btn_Submit_ButtonClick"/>
                                </ItemTemplate>
                             </telerik:RadPanelItem>
                            <telerik:RadPanelItem Text="Test2">
                                <Items>
                                    <telerik:RadPanelItem Text="test2" />
                                </Items>
                            </telerik:RadPanelItem>
                            <telerik:RadPanelItem Text="test3">
                                <Items>
                                    <telerik:RadPanelItem Text="test3" />
                                </Items>
                            </telerik:RadPanelItem>
                        </Items>
                    </telerik:RadPanelBar>

[Paul]

Hello Duy,

You cannot collapse a header panel item with a template. Here's a sample:

Item1
--template
Item2
--template

In this case, you cannot collapse Item1 and Item2.

Here's how the panelbar structure should look as to achieve your goal:

Item1
-- (RadpanelItem without text)
    --template
Item2
-- (RadpanelItem without text)
    --template

<telerik:RadPanelBar ID="RadPanelBar1" runat="server" Skin="Web20" ExpandMode="fullExpandedItem"
            OnClientItemClicked="collapseRoots">
    <Items>
    <telerik:RadPanelItem Value="RadPanelBar_CompanyReport" Text="Company Report" runat="server">
        <Items>
        <telerik:RadPanelItem runat="server" Value="templateHolder">
            <ItemTemplate>
            <telerik:RadTextBox ID="txt_test" runat="server" />
            <asp:Button ID="btn_Submit" runat="server" Text="Submit" OnClick="btn_Submit_ButtonClick" />
            </ItemTemplate>
        </telerik:RadPanelItem>
        </Items>
    </telerik:RadPanelItem>
    <telerik:RadPanelItem Text="Test2" runat="server">
        <Items>
        <telerik:RadPanelItem Text="test2" runat="server" />
        </Items>
    </telerik:RadPanelItem>
    <telerik:RadPanelItem Text="test3" runat="server">
        <Items>
        <telerik:RadPanelItem Text="test3" runat="server" />
        </Items>
    </telerik:RadPanelItem>
    </Items>
</telerik:RadPanelBar>

Best wishes,
Paul
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Check out the tips for optimizing your support resource searches.

[Shinu]

Hi Duy ,

I tried your code and found that it is working as expected. The textbox and button are visible even if the first panelitem is collapsed because those are placed as ItemTemplate of first PanelbarItem. If you want to show these controls only on expanding the first panelbar item, then add sub panelbar item for the root item and add the controls as ItemTemplate. See the ASPX shown below. Hope this would be of help.

<telerik:RadPanelBar ID="RadPanelBar2" runat="server" Skin="Web20" ExpandMode="fullexpandeditem">
    <Items>
        <telerik:RadPanelItem Value="RadPanelBar_CompanyReport" Text="Company Report">
            <Items>
                <telerik:RadPanelItem>
                    <ItemTemplate>
                        <telerik:RadTextBox ID="txt_test" runat="server" />
                        <asp:Button ID="btn_Submit" runat="server" Text="Submit" />
                    </ItemTemplate>
                </telerik:RadPanelItem>
            </Items>
        </telerik:RadPanelItem>
        <telerik:RadPanelItem Text="Test2">
            <Items>
                <telerik:RadPanelItem Text="test2" />
            </Items>
        </telerik:RadPanelItem>
        <telerik:RadPanelItem Text="test3">
            <Items>
                <telerik:RadPanelItem Text="test3" />
            </Items>
        </telerik:RadPanelItem>
    </Items>
</telerik:RadPanelBar>

-Shinu.

[Web Services]

Awesome thanks, the funny thing is, I remember reading that post a few days ago, it must have just been too late in the day :). I also databind my treeview in the code behind and it's a little tricky on how you get the radtreeview's id so I'm posting my code to hopefully save some poor soul later on. Thanks for all of your help.

<%

@ Master Language="VB" AutoEventWireup="false" CodeBehind="MasterPage.master.vb"

 

 

Inherits="ClickableCommunity.MasterPage" %>

 

<%

@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %>

 

<!

DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

 

<

html xmlns="http://www.w3.org/1999/xhtml">

 

<

html xmlns="http://www.w3.org/1999/xhtml">

 

<%

@ import namespace="System.Data" %>

 

<%

@ import namespace="System.Data.Sql" %>

 

<%

@ import namespace="System.Data.SqlClient" %>

 

<%

@ import namespace="Telerik.Web.UI" %>

 

<

script runat="server">

 

 

 

Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load

 

 

 

If Not Page.IsPostBack Then

 

 

 

Dim tree As RadTreeView = DirectCast(RadPanelBar1.FindItemByText("Events").Items(0).FindControl("RadTreeView1"), RadTreeView)

 

 

'here is where the error is. it is saying that

 

 

'createtable is null

 

tree.DataSource = CreateTable()

tree.DataFieldID =

"ID"

 

tree.DataFieldParentID =

"ParentID"

 

tree.DataTextField =

"Text"

 

tree.DataBind()

 

 

End If

 

 

End Sub 'page_load

 

 

 

'this function creates a datatable for the rad

 

 

'tree that is in the events panel

 

 

Private Function CreateTable() As DataTable

 

 

'set up my connection to the database

 

 

Dim conn As New SqlConnection

 

conn.ConnectionString = ConfigurationManager.ConnectionStrings(

"connectionString").ConnectionString

 

 

Dim table As DataTable = New DataTable()

 

table.Columns.Add(

"ID")

 

table.Columns.Add(

"ParentID")

 

table.Columns.Add(

"Text")

 

 

'this is a counter for the id fields

 

 

'of the data table

 

 

Dim count As Integer = 1

 

 

 

'this adds the parent categories to the

 

 

'datatable

 

 

Dim categoryQuery As New SqlCommand

 

conn.Open()

categoryQuery.Connection = conn

categoryQuery.CommandText =

"select CategoryId, Name from categories"

 

 

Dim cdr As SqlDataReader = categoryQuery.ExecuteReader()

 

 

While cdr.Read()

 

 

 

If (cdr.Item(0).ToString <> "") Then

 

 

table.Rows.Add(

New String() {count.ToString, Nothing, cdr.Item(1).ToString})

 

 

'we have to increment count to keep an id for the data table

 

count = count + 1

 

 

End If

 

 

 

End While 'while cdr.Read()

 

conn.Close()

conn.Open()

 

'this adds the events with their parent category

 

 

'id to the datatable

 

 

Dim eventQuery As New SqlCommand

 

eventQuery.Connection = conn

eventQuery.CommandText =

"SELECT eventid, FK_CategoryID, name from events"

 

 

Dim edr As SqlDataReader = eventQuery.ExecuteReader()

 

 

While edr.Read()

 

 

 

If (edr.Item(0).ToString <> "") Then

 

 

table.Rows.Add(

New String() {count.ToString(), edr.Item(1).ToString, edr.Item(2).ToString})

 

 

'we have to increment count to keep an id for the data table

 

count = count + 1

 

 

End If

 

 

 

End While 'while edr.Read()

 

 

 

Return table

 

 

End Function 'CreateGenreTable

 

 

</

script>

 

<

head runat="server">

 

 

<link href="ClickableCommunity.css" rel="stylesheet" type="text/css" />

 

 

<title></title>

 

 

<asp:ContentPlaceHolder ID="head" runat="server">

 

 

</asp:ContentPlaceHolder>

 

</

head>

 

<

body id="MasterBody" runat="server" style="margin: 0px; height: 100%; overflow: hidden;"

 

 

scroll="no">

 

 

<form id="Form1" method="post" runat="server" style="height: 100%">

 

 

<asp:ScriptManager ID="ScriptManager1" runat="server">

 

 

</asp:ScriptManager>

 

 

<br />

 

 

<asp:ContentPlaceHolder ID="header" runat="server">

 

 

<div id="topDiv">

 

 

</div>

 

 

</asp:ContentPlaceHolder>

 

 

<telerik:RadSplitter ID="RadSplitter1" runat="server" Orientation="Vertical" Width="100%"

 

 

Height="100%" CssClass="AllContent">

 

 

<telerik:RadPane ID="LeftRadPane1" runat="server" Width="220px" Scrolling="Both"

 

 

BorderStyle="None" BorderSize="0">

 

 

<div id="leftPanel">

 

 

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

 

 

AllowCollapseAllItems="true" Width="220px">

 

 

<CollapseAnimation Type="None" Duration="100"></CollapseAnimation>

 

 

<Items>

 

 

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

 

 

<Items>

 

 

<telerik:RadPanelItem runat="server">

 

 

<ItemTemplate>

 

 

<telerik:RadTreeView ID="RadTreeView1" runat="server" Skin="Web20" CssClass="leftPanelContent">

 

 

</telerik:RadTreeView>

 

 

</ItemTemplate>

 

 

</telerik:RadPanelItem>

 

 

</Items>

 

 

</telerik:RadPanelItem>

 

 

<telerik:RadPanelItem runat="server" Text="Calendar" ChildGroupCssClass="leftPanelContent">

 

 

<Items>

 

 

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

 

 

</telerik:RadPanelItem>

 

 

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

 

 

</telerik:RadPanelItem>

 

 

</Items>

 

 

</telerik:RadPanelItem>

 

 

<telerik:RadPanelItem runat="server" Text="Administrator" ChildGroupCssClass="leftPanelContent">

 

 

<Items>

 

 

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

 

 

</telerik:RadPanelItem>

 

 

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

 

 

</telerik:RadPanelItem>

 

 

</Items>

 

 

</telerik:RadPanelItem>

 

 

</Items>

 

 

<ExpandAnimation Type="None" Duration="100"></ExpandAnimation>

 

 

</telerik:RadPanelBar>

 

 

</div>

 

 

</telerik:RadPane>

 

 

<telerik:RadSplitBar runat="server" ID="RadSplitBar2" CollapseMode="Forward" EnableResize="false"

 

 

ForeColor='Green' />

 

 

<telerik:RadPane ID="RightRadPane1" runat="server" CssClass="RightPanelPadding" Scrolling="Both"

 

 

BorderStyle="None" BorderSize="0">

 

 

<asp:ContentPlaceHolder ID="MainContent" runat="server">

 

 

</asp:ContentPlaceHolder>

 

 

</telerik:RadPane>

 

 

</telerik:RadSplitter>

 

 

</form>

 

</

body>

 

</

html>

 

[Ken Miller]

What if I am using the global template?  This works for what it is, but I can not expand or collapse any of them.

<%@ Page Title="" Language="C#" MasterPageFile="~/MasterPage.master" AutoEventWireup="true"
    CodeFile="Subcategories.aspx.cs" Inherits="Subcategories" %>

<%@ Register Assembly="Telerik.Web.UI, Version=2009.3.1314.35, Culture=neutral, PublicKeyToken=121fae78165ba3d4"
    Namespace="Telerik.Web.UI" TagPrefix="telerik" %>
<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="Server">
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="Server">
    <telerik:RadPanelBar ID="RadPanelBar1" runat="server" DataFieldID="SubCatgegoryID"
        DataSourceID="SubcategoriesLDS" DataTextField="Name" DataValueField="SubCatgegoryID"
        Skin="WebBlue" OnItemDataBound="RadPanelBar1_ItemDataBound" Width="600px">
        <ItemTemplate>
            <asp:DataList ID="DataList1" runat="server" RepeatDirection="Horizontal">
                <ItemTemplate>
                    <table>
                        <tr valign="top">
                            <td colspan="2" valign="top">
                                <asp:ImageButton ID="ImageButton1" runat="server" ImageUrl='<%# Eval("ImageURL") %>'
                                    PostBackUrl='<%# Eval("ItemID", "ItemDetails.aspx?itemid={0}") %>' Height="200px"
                                    ImageAlign="AbsMiddle" Width="200px" />
                            </td>
                        </tr>
                        <tr>
                            <td style="color: Black">
                                Item#:
                            </td>
                            <td style="color: Black">
                                <asp:Label ID="Label2" runat="server" Text='<%# Eval("ItemID") %>'></asp:Label>
                            </td>
                        </tr>
                        <tr>
                            <td style="color: Black">
                                Item Name:
                            </td>
                            Name:
                            <td style="color: Black">
                                <asp:Label ID="Label10" runat="server" Text='<%# Eval("Name") %>'></asp:Label>
                            </td>
                        </tr>
                        <tr>
                            <td valign="top" style="color: Black">
                                Description:
                            </td>
                            <td width="800" height="50" style="color: Black">
                                <asp:Label ID="Label3" runat="server" Text='<%# Eval("Description") %>'></asp:Label>
                            </td>
                        </tr>
                        <tr>
                            <td style="color: Black">
                                As Low As
                            </td>
                            <td>
                                <asp:Label ID="Label4" runat="server" Text='<%# Eval("Price","{0:c}") %>' ForeColor="#FF3300"></asp:Label>
                            </td>
                        </tr>
                    </table>
                </ItemTemplate>
            </asp:DataList>
            <asp:LinkButton ID="LinkButton1" PostBackUrl='<%# Eval("SubCatgegoryID", "ItemSelect.aspx?subcategoryid={0}") %>' ForeColor="Blue" runat="server" >View All...</asp:LinkButton>
            <asp:Label ID="Label1" runat="server" Text='<%# Eval("SubCatgegoryID") %>' ForeColor="White"></asp:Label>
        </ItemTemplate>
    </telerik:RadPanelBar>
    <asp:LinqDataSource ID="SubcategoriesLDS" runat="server" ContextTypeName="CatalystDataContext"
        TableName="SubCategories" Where="CategoryID == @CategoryID">
        <WhereParameters>
            <asp:QueryStringParameter DefaultValue="1" Name="CategoryID" QueryStringField="category"
                Type="Int32" />
        </WhereParameters>
    </asp:LinqDataSource>
</asp:Content>

[Yana]

Hi Ken Miller,

I'm afraid that you cannot use global template and collapse/expand the root items. You can create the template dynamically and use it only for the child items.

Kind regards,
Yana
the Telerik team

Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items.