This is a migrated thread and some comments may be shown as answers.

controls within radPanelBarItem header

5 Answers 275 Views

PanelBar

This is a migrated thread and some comments may be shown as answers.

5 Answers, 1 is accepted

answered on 14 Oct 2009, 12:45 PM

Hi BIG,

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

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

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

answered on 11 May 2011, 09:01 PM

ScreenHunter-02-May-11-12-53.jpg

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

answered on 13 May 2011, 01:01 PM

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.