PanelBarItem with iconlink

[Rutger Kars]

Hi,

is it possible to let a PanelBarItem has 2 links? The button itself will redirect to a detailpage, while the icon will delete that entity or create a new one?
I've been looking for this functionality and also found a couple of possible things, but they didn't work, so I'm wondering if it is possible... and if so... How?

Thanks in advance.

[Yana]

Hello Rutger Kars,

I suggest you use templates in your case. You can read more about them here:
http://www.telerik.com/help/aspnet-ajax/panel_templatesoverview.html

Also, have a look at the online demos here:
http://www.telerik.com/demos/aspnet/prometheus/Panelbar/Examples/Functionality/Templates/DefaultCS.aspx


Yana
the Telerik team

Instantly find answers to your questions at the new Telerik Support Center

[Rutger Kars]

With the itemtemplate, the content of it will be placed below the button itself, instead of on the button.

For example, I want a structure like this:

Customers      [New]
   Customername1    [X]
   Customername2    [X]
Contracts      [New]
   Contract1        [X]
   Contract2        [X]

The code between the [] bracket is the imagelink, so if I click on the [new], I can create a new customer, while a click on [X] will delete that customer/contract. Clicking on the name will redirect to a detailpage of the customer/contract.

I forgot to mention that this menu will be dynamically created on the page_load, and will be different depending on the selected item on a radiobuttonlist

[Yana]

Hello Rutger Kars,

Please look at this example again http://www.telerik.com/demos/aspnet/prometheus/Panelbar/Examples/Functionality/Templates/DefaultCS.aspx

Perhaps you missed the menu in the first panel item. It is places on the button with the help of some css.

Regards,
Yana
the Telerik team

Instantly find answers to your questions at the new Telerik Support Center

[Rutger Kars]

Thanks for your reply Yana,

I was able to build such a menu in the static way (so building it at design time). However, the menu items depends on selected items in a grid, so has to be dynamically created.

My designtime code now looks like this:

<telerik:RadPanelBar ID="rpbRelatedEntities" runat="server" ExpandMode="SingleExpandedItem"
            Height="470px" Width="198px" Skin="WebBlue" OnItemClick="rpbRelatedEntities_ItemClick">
            <CollapseAnimation Type="None" Duration="100"></CollapseAnimation>
            <Items>
                <telerik:RadPanelItem runat="server" Text="Afdeling" Width="198px" ImagePosition=Left ImageUrl="Images/GridRow_NormalState.gif">
                    <ItemTemplate>
                        <telerik:RadMenu ID="menu1" Skin="Default2006" runat="server" Height="0px">
                            <Items>
                                <telerik:RadMenuItem Height="0px" Width="20px" CssClass="rootItem" Text="<img border='0' src='Images/addRelation.gif'>" NavigateUrl="http://www.feest.nl" />
                            </Items>
                        </telerik:RadMenu>
                    </ItemTemplate>
                    <Items>
                        <telerik:RadPanelItem runat=server Text="Klant 1" Width="198px" ImagePosition=Left ImageUrl="Images/GridRow_NormalState.gif">
                            <ItemTemplate>
                                <telerik:RadMenu ID="menu2" Skin="Default2006" runat="server">
                                    <CollapseAnimation Type="None" />
                                    <Items>
                                        <telerik:RadMenuItem Width="20px" CssClass="childItem" Text="<img border='0' src='Images/delete.gif'>" NavigateUrl="http://www.test.nl" />
                                    </Items>
                                </telerik:RadMenu>
                            </ItemTemplate>
                        </telerik:RadPanelItem>
                        <telerik:RadPanelItem runat=server Text="Klant 2" Width="198px" ImagePosition=Left ImageUrl="Images/GridRow_NormalState.gif">
                            <ItemTemplate>
                                <telerik:RadMenu ID="menu2" Skin="Default2006" runat="server">
                                    <CollapseAnimation Type="None" />
                                    <Items>
                                        <telerik:RadMenuItem Width="20px" CssClass="childItem" Text="<img border='0' src='Images/delete.gif'>" NavigateUrl="http://www.google.nl" />
                                    </Items>
                                </telerik:RadMenu>
                            </ItemTemplate>
                        </telerik:RadPanelItem>
                    </Items>
                </telerik:RadPanelItem>
                <telerik:RadPanelItem runat="server" Text="Persoon" Width="198px" ImagePosition=Left ImageUrl="Images/GridRow_NormalState.gif">
                    <ItemTemplate>
                        <telerik:RadMenu ID="menu1" Skin="Default2006" runat="server" Height="0px">
                            <CollapseAnimation Type="None" />
                            <Items>
                                <telerik:RadMenuItem Height="0px" Width="20px" CssClass="rootItem" Text="<img border='0' src='Images/addRelation.gif'>" NavigateUrl="http://www.google.nl">
                                </telerik:RadMenuItem>
                            </Items>
                        </telerik:RadMenu>
                    </ItemTemplate>
                    <Items>
                        <telerik:RadPanelItem runat=server Text="Klant 1" Width="198px">
                            <ItemTemplate>
                                <telerik:RadMenu ID="menu2" Skin="Default2006" runat="server" Height="0px">
                                    <CollapseAnimation Type="None" />
                                    <Items>
                                        <telerik:RadMenuItem Height="0px" Width="20px" CssClass="childItem" Text="<img border='0' src='Images/delete.gif'>" NavigateUrl="http://www.test.nl" />
                                    </Items>
                                </telerik:RadMenu>
                            </ItemTemplate>
                        </telerik:RadPanelItem>
                        <telerik:RadPanelItem runat=server Text="Klant 2" Width="198px">
                            <ItemTemplate>
                                <telerik:RadMenu ID="menu2" Skin="Default2006" runat="server">
                                    <CollapseAnimation Type="None" />
                                    <Items>
                                        <telerik:RadMenuItem Width="20px" CssClass="childItem" Text="<img border='0' src='Images/delete.gif'>" NavigateUrl="http://www.google.nl" />
                                    </Items>
                                </telerik:RadMenu>
                            </ItemTemplate>
                        </telerik:RadPanelItem>
                    </Items>
                </telerik:RadPanelItem>
            </Items>
            <ExpandAnimation Type="None" Duration="100"></ExpandAnimation>
        </telerik:RadPanelBar>

So I started to replace the ItemTemplates. The InstantiateIn function for this template look like this:

public void InstantiateIn(System.Web.UI.Control container)
    {
        Literal lc = new Literal();
        string menu = "<telerik:RadMenu Skin=\"Default2006\" runat=\"server\" Height=\"0px\">" +
                      "<Items>" +
                      "<telerik:RadMenuItem Height=\"0px\" Width=\"20px\" CssClass=\"rootItem\" Text=\"<img border='0' src='Images/addRelation.gif'>\" NavigateUrl=\"http://www.feest.nl\" /> " +
                      "</Items>" +
                      "</telerik:RadMenu>";

        string menu2 =  "<div id=\"rpbRelatedEntities_i2_menu1\" class=\"RadMenu RadMenu_Default2006 \" style=\"height: 0px;\"> " +
                        "<ul class=\"rmHorizontal rmRootGroup\">" +
                        "<li class=\"rmItem rmFirst rmLast\" style=\"width: 20px;\"><a href=\"http://www.feest.nl\"" +
                        "class=\"rmLink rootItem\" style=\"height: 0px;\"><span class=\"rmText\">" +
                        "<img border='0' src='Images/addRelation.gif'></span></a></li>" +
                        "</ul>" +
                        "<input id=\"rpbRelatedEntities_i2_menu1_ClientState\" name=\"rpbRelatedEntities_i2_menu1_ClientState\"" +
                        "type=\"hidden\" />" +
                        "</div>";

        lc.Text = menu;

        container.Controls.Add(lc);
    }

When looking at the generated page code from server, It is different with the designtime generated code. This is the runtime generated code:

 <li class="rpItem rpLast"><a href="#" class="rpLink rpExpandable"><span class="rpText">
                    Contactpersonen (5)</span></a><div class="rpTemplate">
                        <telerik:radmenu skin="Default2006" runat="server" height="0px"><Items><telerik:RadMenuItem Height="0px" Width="20px" CssClass="rootItem" Text="<img border='0' src='Images/addRelation.gif'>" NavigateUrl="http://www.feest.nl" /> </Items></telerik:radmenu>
                    </div>

and this the designtime:

<li class="rpItem"><a href="#" class="rpLink rpExpandable" style="width: 198px;">
                    <img alt="" src="Images/GridRow_NormalState.gif" class="rpImage" /><span class="rpText">Persoon</span></a><div
                        class="rpTemplate">
                        <div id="rpbRelatedEntities_i1_menu1" class="RadMenu RadMenu_Default2006 " style="height: 0px;">
                            <ul class="rmHorizontal rmRootGroup">
                                <li class="rmItem rmFirst rmLast" style="width: 20px;"><a href="http://www.google.nl"
                                    class="rmLink rootItem" style="height: 0px;"><span class="rmText">
                                        <img border='0' src='Images/addRelation.gif'></span></a></li>
                            </ul>
                            <input id="rpbRelatedEntities_i1_menu1_ClientState" name="rpbRelatedEntities_i1_menu1_ClientState"
                                type="hidden" />
                        </div>
                    </div>

So I tried the menu2 section in the InstantiateIn function, to match the last codeblock. I do get the image, and I can click on it, however, when I open this menu section, the image will disappear and it looks like a regular menuitem again. That is off-course, because I mis the generated javascript functions and so on. So how can this be achieved in runtime code?

[Yana]

Hi Rutger Kars,

I wasn't able to understand completely what the problem is. Please send us a more detailed explanation and css styles if possible.
 
Kind regards,
Yana
the Telerik team

Instantly find answers to your questions at the new Telerik Support Center

[Rutger Kars]

Hi Yana,

the problem is that when building up de menu dynamically, the server generated returncode will have a <telerik:radmenu> tag in it. Therefor there is no formatting and no image at all. When I look at the server generated code on a static menu (designtime build), there is no <telerik> tag, but is all replaced with several <div>, <li> and <lu> tags, so the formatting.

I created the RadPanelItem with the code below:

RadPanelItem cp = new Telerik.Web.UI.RadPanelItem("Contactpersonen");
cp.ItemTemplate = new MenuRootTemplate();

The MenuRootTemplate class has the InstantiateIn function like in my last post, and with that function, I will get the <telerik> tag in my generated page code.
When I try to avoid that, and generate code which looks like the generated code (string menu2 in the InstantiateIn function), I do see the image on the right, but as soon as I open the menu (as there are submenu's beneath), the image will disappear and it is a regular RadPanelItem again.

This is my stylesheet:

div.RadMenu
{
    margin: -20px 0 0 0px;
}

div.RadMenu .rootItem
{
    margin: 0 0 0 160px;
    background: none;
    border: 0;
    line-height: 20px;
    width: 16px;
}

div.RadMenu .childItem
{
    margin: 0 0 0 160px;
    background: none;
    border: 0;
    line-height: 20px;
    width: 16px;
}

[Yana]

Hi Rutger Kars,

Thank you for getting back to me.

I suggest you create RadMenu with C# code like this:

 RadMenu radmenu = new RadMenu();
 radmenu.ID = "menu1";
 radmenu.Skin = "Default2006";
 ...

I have attached a sample project which demonstrates the suggested solution. You could download it and give it a try.

All the best,
Yana
the Telerik team

Instantly find answers to your questions at the new Telerik Support Center