Hello
I am looking for a way to add a control to my radpanelbarItems.
I would like to keep all the "free" functionalities of the panelbaritem (img, hoverimage, text, expand/collapse , default styling etc) so i prefer not using templates.
I populate the radpanelbar from codebehind as demonstrated in attached code.
My first try is simply to add the control and move it in place using css. But unfortunately the content area of the panelbaritem keeps it height, smashing the layout of the panels.
any hint would be highly appreciated , either to making the attached example work or a different approach.
kind regards
Mark
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="test.aspx.cs" Inherits="test" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<style>
.myimg {
position: relative !important;
top: -30px !important;
left: 100px !important;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<telerik:RadScriptManager ID="RadScriptManager1" runat="server">
<Scripts>
<asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.Core.js"></asp:ScriptReference>
<asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.jQuery.js"></asp:ScriptReference>
<asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.jQueryInclude.js"></asp:ScriptReference>
</Scripts>
</telerik:RadScriptManager>
<div>
<telerik:RadPanelBar ID="RadPanelBar1" runat="server" ExpandMode="SingleExpandedItem" Skin="Bootstrap" Width="300">
<Items>
</Items>
</telerik:RadPanelBar>
</div>
</form>
</body>
</html>
using System;
using System.Collections.Generic;
using System.IO;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using Telerik.Web.UI;
public partial class test : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
FillPanels();
}
protected void FillPanels()
{
for (int i = 0; i < 10; i++)
{
RadPanelItem ProductPanel = new RadPanelItem { Text = "P" + i.ToString(), Expanded = false, ImageUrl = "/images/prod_notok.png", Value = "P" + i.ToString() };
//add control try
ProductPanel.Controls.Add(new Image { ImageUrl = @"/images/pdf.png",CssClass="myimg",ID="img" + i.ToString() });
for (int h = 0; h < 3; h++)
{
RadPanelItem SubPanel = new RadPanelItem { Text = "S" + i.ToString() + h.ToString(), ImageUrl = "/images/notok.png", Expanded = false, Value = "S" + h.ToString() + i.ToString() };
ProductPanel.Items.Add(SubPanel);
}
RadPanelBar1.Items.Add(ProductPanel);
}
}
}1 Answer, 1 is accepted
Hello Mark,
Here is a working example:
<telerik:RadPanelBar ID="RadPanelBar1" runat="server" ExpandMode="SingleExpandedItem" Skin="Bootstrap" Width="300">
</telerik:RadPanelBar>
C#
protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack)
{
// Create New Panel Item
var panelbarItem = new RadPanelItem() { Text = "Panel Item 1" };
// Add controls to Panel Item
panelbarItem.Controls.Add(new LiteralControl() { Text = "<h4>Panel Bar Content 1</h4>" });
panelbarItem.Controls.Add(new Image() { ImageUrl = "https://via.placeholder.com/200x30?text=My+First+Image+Control" });
// Add Panel Item to PanelBar
RadPanelBar1.Items.Add(panelbarItem);
// Create New Panel Item
panelbarItem = new RadPanelItem() { Text = "Panel Item 2" };
// Add controls to Panel Item
panelbarItem.Controls.Add(new LiteralControl() { Text = "<h4>Panel Bar Content 2</h4>" });
panelbarItem.Controls.Add(new Image() { ImageUrl = "https://via.placeholder.com/200x30?text=My+Second+Image+Control" });
// Add Panel Item to PanelBar
RadPanelBar1.Items.Add(panelbarItem);
}
}
Result
UPDATE
RadPanelBarItems requires Templates to function properly.
If you only want to add Controls to the PanelBarItem, you still need to have a Content define the ContentTemplate.
Example
<telerik:RadPanelBar ID="RadPanelBar1" runat="server" ExpandMode="SingleExpandedItem" Skin="Bootstrap" Width="300" OnItemClick="RadPanelBar1_ItemClick">
<Items>
<telerik:RadPanelItem Text="Panel Item">
<ContentTemplate>
<%--Add your Controls here--%>
</ContentTemplate>
</telerik:RadPanelItem>
</Items>
</telerik:RadPanelBar>
If doing that on the Server-Side, you will need to create a new class that implements the ITemplate interface. You will use this class to create and add controls to the Template.
class MyContentTemplate : ITemplate
{
public void InstantiateIn(Control container)
{
LiteralControl myLiteral = new LiteralControl() { Text = "<p>This is a Literal Control added to PanelBarItem</p>" };
container.Controls.Add(myLiteral);
}
}
After that, you will need to define the ContentTemplate for each PanelItem.
// Create New Panel Item Instance
var panelbarItem = new RadPanelItem();
// Define the Template
panelbarItem.ContentTemplate = new MyContentTemplate();
Result
Working with Templates also requires using the correct Page events and creating the entire RadPanelBar object on the server-side.
For the event, use the Page Init, and without the "IsPostBack" condition because you'd need to have the object created at every load. You can check out the Page Life Cycle In ASP.NET article for more details.
Example of Creating RadPanelBar and Items on Server
<style>
/*Some CSS to position and resize the image of PanelBarItems*/
.RadPanelBar .rpRootGroup .rpImage {
height: 24px;
margin-right: 24px;
}
</style>
<asp:Panel ID="Panel1" runat="server"></asp:Panel>
<br />
<br />
<telerik:RadButton runat="server" ID="RadButton1" Text="Check SelectedItem Value" AutoPostBack="true" OnClick="RadButton1_Click" />
<br />
<br />
<asp:Label ID="Label1" runat="server"></asp:Label>
C# - Creating the RadPanelBar, its items, and adding all of them to the asp:Panel.
protected void Page_Init(object sender, EventArgs e)
{
var pnlBar = new RadPanelBar() { ID = "RadPanelBar1", Skin = "Bootstrap", ExpandMode = PanelBarExpandMode.SingleExpandedItem, Width = Unit.Pixel(300) };
// Create New Panel Item Instance
var panelbarItem = new RadPanelItem();
// Fill in the properties
panelbarItem.Text = "Panel Item 1";
panelbarItem.Value = "PanelItem1";
panelbarItem.ImageUrl = "~/Images/pdf_icon.png";
panelbarItem.ImagePosition = RadPanelItemImagePosition.Right;
// Define the Template
panelbarItem.ContentTemplate = new MyContentTemplate(panelbarItem.Value);
// Add Panel Item to PanelBar
pnlBar.Items.Add(panelbarItem);
// Create New Panel Item Instance
panelbarItem = new RadPanelItem();
// Fill in the properties
panelbarItem.Text = "Panel Item 2";
panelbarItem.Value = "PanelItem2";
panelbarItem.ImageUrl = "~/Images/pdf_icon.png";
panelbarItem.ImagePosition = RadPanelItemImagePosition.Right;
// Define the Template
panelbarItem.ContentTemplate = new MyContentTemplate(panelbarItem.Value);
// Add Panel Item to PanelBar
pnlBar.Items.Add(panelbarItem);
Panel1.Controls.Add(pnlBar);
}
protected void RadButton1_Click(object sender, EventArgs e)
{
var pnlBar = Panel1.FindControl("RadPanelBar1") as RadPanelBar;
Label1.Text += String.Format("SelectedItem.Value is: {0}<br/>", pnlBar.SelectedItem.Value);
}
C# - Custom Class for ContentTemplate
// Custom Class for the ContentTemplate
class MyContentTemplate : ITemplate
{
string _itemValue;
public MyContentTemplate(string ItemValue = "Default Title")
{
this._itemValue = ItemValue;
}
public void InstantiateIn(Control container)
{
// Create new Controls
LiteralControl pnlLiteral = new LiteralControl();
Image pnlImage = new Image();
// Set the Controls properties
if (this._itemValue == "PanelItem1")
{
pnlLiteral = new LiteralControl() { Text = "<p>Panel Bar Item 1 Content</p>" };
pnlImage = new Image() { ImageUrl = "https://via.placeholder.com/200x30?text=Panel+Bar+Item+1+Image+Control" };
}
else if (this._itemValue == "PanelItem2")
{
pnlLiteral = new LiteralControl() { Text = "<p>Panel Bar Item 2 Content</p>" };
pnlImage = new Image() { ImageUrl = "https://via.placeholder.com/200x30?text=Panel+Bar+Item+2+Image+Control" };
}
// Add the Controls to the Container (ContentTemplate)
container.Controls.Add(pnlLiteral);
container.Controls.Add(pnlImage);
}
}
Result
Regards,
Attila Antal
Progress Telerik
Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.
Rank 1
Thanks for your answer Attila.
Unfortunately it does not quite solve my problem.
My goal is to have the custom image control shown in the header (to the right of 'Panel Item 1')
I have progressed a bit with my solution getting the img styling in place.
The below code solves the layout part, but for some reason offsets the item.selectedvalue serverside.
kind regards
Mark
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<style>
.pdfimg {
position: relative !important;
top: -35px !important;
margin-bottom: -35px !important;
float: right !important;
margin-right: 40px !important;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<telerik:RadScriptManager ID="RadScriptManager1" runat="server">
<Scripts>
<asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.Core.js"></asp:ScriptReference>
<asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.jQuery.js"></asp:ScriptReference>
<asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.jQueryInclude.js"></asp:ScriptReference>
</Scripts>
</telerik:RadScriptManager>
<div>
<telerik:RadPanelBar ID="RadPanelBar1" runat="server" ExpandMode="SingleExpandedItem" Skin="Bootstrap" Width="300">
<Items>
</Items>
</telerik:RadPanelBar>
</div>
</form>
</body>
</html>
using System;
using System.Collections.Generic;
using System.IO;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using Telerik.Web.UI;
public partial class test : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
FillPanels();
}
protected void FillPanels()
{
for (int i = 0; i < 5; i++)
{
RadPanelItem ProductPanel = new RadPanelItem { Text = "P" + i.ToString(), Expanded = false, ImageUrl = "/images/prod_notok.png", Value = "P" + i.ToString() };
//Add pdficon control
Image img = new Image { ImageUrl = @"images/pdf.png", CssClass = "pdfimg", ID = "img" + i.ToString() };
ProductPanel.Controls.Add(img);
for (int h = 0; h < 3; h++)
{
RadPanelItem SubPanel = new RadPanelItem { Text = "S" + i.ToString() + h.ToString(), ImageUrl = "/images/notok.png", Expanded = false, Value = "S" + h.ToString() + i.ToString() };
ProductPanel.Items.Add(SubPanel);
}
RadPanelBar1.Items.Add(ProductPanel);
}
}
}
Hi Mark,
Thanks for clarifying this for me. I have updated my initial answer. Please follow the instructions below the UPDATE label.
Rank 1
Thanks Attila for your very thorough answer.
Your solution solves the problem and keeps the radpanelbar in sync with it's items.
best regards
Mark