can't collapse or expand panel bar w/ itemtemplate

6 posts, 0 answers
  1. appdev
    appdev avatar
    223 posts
    Member since:
    Sep 2008

    Posted 06 Jul 2009 Link to this post

    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> 
  2. Paul
    Admin
    Paul avatar
    4281 posts

    Posted 07 Jul 2009 Link to this post

    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.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Shinu
    Shinu avatar
    17764 posts
    Member since:
    Mar 2007

    Posted 07 Jul 2009 Link to this post

    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.
  5. Web Services
    Web Services avatar
    243 posts
    Member since:
    Apr 2008

    Posted 05 Aug 2009 Link to this post

    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>

     

  6. Ken Miller
    Ken Miller avatar
    12 posts
    Member since:
    Feb 2010

    Posted 11 Apr 2010 Link to this post

    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> 

  7. Yana
    Admin
    Yana avatar
    4554 posts

    Posted 14 Apr 2010 Link to this post

    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.
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017