controls within radPanelBarItem header

6 posts, 0 answers
  1. Steven Black
    Steven Black avatar
    44 posts
    Member since:
    Feb 2008

    Posted 07 Aug 2009 Link to this post

    Is it possible to put controls (ie. buttons) next to the caption of a radPanelBarItem?

    Thanks.
  2. Peter
    Admin
    Peter avatar
    6637 posts

    Posted 10 Aug 2009 Link to this post

    Hello Steven,

    Yes, try using Templates:
    http://demos.telerik.com/aspnet-ajax/panelbar/examples/functionality/templates/defaultcs.aspx



    Peter
    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. BIG
    BIG avatar
    1 posts
    Member since:
    Nov 2008

    Posted 14 Oct 2009 Link to this post

    This demo doesn't work on my project.
    I even copied your code and still it doesn't work.

    The  menu allways goes below the radpanelitem instead of inside of it. How can I get the menu inside the radpanelitem?

    BIG
  5. Paul
    Admin
    Paul avatar
    4281 posts

    Posted 14 Oct 2009 Link to this post

    Hi BIG,

    Please find below a sample code snippet that shows the needed approach.

    <head runat="server">
        <title></title>
        <style type="text/css">
            div.RadPanelBar .rpItem
            {
                position: relative;
            }
            div.RadComboBox
            {
                position: absolute;
                top: 2px;
                left: 120px;
            }
        </style>
    </head>
    <body>
        <form id="form1" runat="server">
        <telerik:RadScriptManager ID="RadScriptManager1" runat="server">
        </telerik:RadScriptManager>
        <telerik:RadPanelBar runat="server" ID="RadPanelBar1" Width="750px" Height="280px"
            ExpandMode="FullExpandedItem">
            <Items>
                <telerik:RadPanelItem Text="Products > Books" Expanded="true">
                    <Items>
                        <telerik:RadPanelItem runat="server" Text="Child RadPanelItem 1">
                        </telerik:RadPanelItem>
                        <telerik:RadPanelItem runat="server" Text="Child RadPanelItem 2">
                        </telerik:RadPanelItem>
                    </Items>
                    <ItemTemplate>
                        <telerik:RadComboBox runat="server" ID="RadComboBox1">
                            <Items>
                                <telerik:RadComboBoxItem runat="server" Text="RadComboBoxItem1" Value="RadComboBoxItem1" />
                                <telerik:RadComboBoxItem runat="server" Text="RadComboBoxItem2" Value="RadComboBoxItem2" />
                                <telerik:RadComboBoxItem runat="server" Text="RadComboBoxItem3" Value="RadComboBoxItem3" />
                            </Items>
                        </telerik:RadComboBox>
                    </ItemTemplate>
                </telerik:RadPanelItem>
                <telerik:RadPanelItem runat="server" Text="Root RadPanelItem2">
                    <Items>
                        <telerik:RadPanelItem runat="server" Text="Child RadPanelItem 1">
                        </telerik:RadPanelItem>
                        <telerik:RadPanelItem runat="server" Text="Child RadPanelItem 2">
                        </telerik:RadPanelItem>
                        <telerik:RadPanelItem runat="server" Text="Child RadPanelItem 3">
                        </telerik:RadPanelItem>
                        <telerik:RadPanelItem runat="server" Text="Child RadPanelItem 4">
                        </telerik:RadPanelItem>
                    </Items>
                </telerik:RadPanelItem>
                <telerik:RadPanelItem runat="server" Text="Root RadPanelItem3">
                </telerik:RadPanelItem>
            </Items>
        </telerik:RadPanelBar>
        </form>
    </body>
    </html>


    Regards,
    Paul
    the Telerik team

    Instantly find answers to your questions on the new Telerik Support Portal.
    Watch a video on how to optimize your support resource searches and check out more tips on the blogs.
  6. Tri Nguyen
    Tri Nguyen avatar
    40 posts
    Member since:
    Feb 2004

    Posted 11 May 2011 Link to this post

        <telerik:RadPanelItem runat="server" Text="Product">
            <HeaderTemplate>
                <div>
                    <asp:CheckBox ID="CheckBox1" runat="server" Text="Meetings" />
                </div>
            </HeaderTemplate>
            <ContentTemplate>
                <div style="padding: 3px;">
                    <asp:CheckBoxList ID="cklProducts" runat="server" RepeatColumns="2" RepeatDirection="Horizontal"
                        DataTextField="product_name" DataValueField="product_id">
                    </asp:CheckBoxList>
                </div
            </ContentTemplate>
        </telerik:RadPanelItem>
        <telerik:RadPanelItem runat="server" Text="Profile List">
            <ContentTemplate>
                <div style="padding: 5px; padding-left: 15px;">
                    <span style="padding-right: 15px; float: left;">
                        <telerik:RadComboBox ID="rcbProfileList" runat="server" Width="250px" AutoPostBack="true"
                            EnableEmbeddedSkins="True" Skin="WebBlue" Visible="true" DataTextField="profile_list_name"
                            DataValueField="profile_list_id">
                        </telerik:RadComboBox>
                    </span><span style="float: left;">
                        <asp:Label ID="lblProfileListOwner" runat="server"></asp:Label></span>
                </div>
            </ContentTemplate>
        </telerik:RadPanelItem>
    </Items>

    Is it possible to add a control(checkbox) to the radPanelBarItem's header, with has a custom skin, and keep the same layout as the other items' header? As in the attached image, the header, which contains the checkbox, lost the text ("Product") on the left and the arrow image on the right. I also used the .css file in the C:\Telerik\RadControls for ASP.NET AJAX Q3 2010\Live Demos\PanelBar\Examples folder.

    Thanks for your time.

    Tri.
  7. Helen
    Admin
    Helen avatar
    1052 posts

    Posted 13 May 2011 Link to this post

    Hello,

    Actually it is not possible out of the box. When you add a template it overrides the default appearance of the PanelItems.
    You should add extra control(s) to the HeaderTemplate. Please try the following:

    <telerik:RadPanelBar runat="server" ID="RadPanelBar1" ExpandMode="SingleExpandedItem">
    <Items>
        <telerik:RadPanelItem runat="server">
        <HeaderTemplate>
            <div>
            <span class="rpText" style="float: left">Products</span>
            <asp:CheckBox ID="CheckBox1" runat="server" Text="Meetings"/>
            <span class="rpExpandHandle"></span>
            </div>
        </HeaderTemplate>
        <ContentTemplate>
            <div style="padding: 3px;">
            <asp:CheckBoxList ID="cklProducts" runat="server" RepeatColumns="2"
                RepeatDirection="Horizontal"
                DataTextField="product_name" DataValueField="product_id">
            </asp:CheckBoxList>
            </div>
        </ContentTemplate>
        </telerik:RadPanelItem>
        <telerik:RadPanelItem runat="server" Text="Profile List">
        <ContentTemplate>
            <div style="padding: 5px; padding-left: 15px;">
            <span style="padding-right: 15px; float: left;">
                <telerik:RadComboBox ID="rcbProfileList" runat="server" Width="250px" AutoPostBack="true"
                EnableEmbeddedSkins="True" Skin="WebBlue" Visible="true" DataTextField="profile_list_name"
                DataValueField="profile_list_id">
                </telerik:RadComboBox>
            </span><span style="float: left;">
                <asp:Label ID="lblProfileListOwner" runat="server"></asp:Label></span>
            </div>
        </ContentTemplate>
        </telerik:RadPanelItem>
    </Items>
    </telerik:RadPanelBar>


    Regards,
    Helen
    the Telerik team

    Browse the vast support resources we have to jump start your development with RadControls for ASP.NET AJAX. See how to integrate our AJAX controls seamlessly in SharePoint 2007/2010 visiting our common SharePoint portal.

Back to Top
UI for ASP.NET Ajax is Ready for VS 2017