Radpanelbar: add image control to Item, not using templates

1 Answer 41 Views
PanelBar
Mark
Top achievements
Rank 1
Mark asked on 26 Apr 2022, 09:34 AM | edited on 26 Apr 2022, 09:37 AM

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

Sort by
0
Accepted
Attila Antal
Telerik team
answered on 29 Apr 2022, 09:02 AM | edited on 04 May 2022, 09:58 AM

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

Mark
Top achievements
Rank 1
commented on 29 Apr 2022, 10:44 AM

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);

        }
    }


}

 

Attila Antal
Telerik team
commented on 04 May 2022, 09:57 AM

Hi Mark,

Thanks for clarifying this for me. I have updated my initial answer. Please follow the instructions below the UPDATE label.

Mark
Top achievements
Rank 1
commented on 04 May 2022, 02:30 PM

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

Tags
PanelBar
Asked by
Mark
Top achievements
Rank 1
Answers by
Attila Antal
Telerik team
Share this question
or