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

Adding a Custom menu item along with a DataSource which is a sitemap

5 Answers 68 Views
Menu
This is a migrated thread and some comments may be shown as answers.
Vaibhav
Top achievements
Rank 1
Vaibhav asked on 20 Feb 2014, 06:53 AM
Hi ,

I want to add a menu  item to my radmenu.
Currently the menu is getting populated from a sitemap. i want to keep that as it is and add a new item to the menu.
I can NOT add the new menu item to sitemap as it is a div so i need to have it in a itemtemplate.

The new item would be say Language with some thing like-
 <telerik:RadMenuItem Text="Language">
              <Items>
                  <telerik:RadMenuItem>
                      <ItemTemplate>
                          <div>
                              English
                      <br />
                              French
                          </div>
                      </ItemTemplate>
                  </telerik:RadMenuItem>
              </Items>
          </telerik:RadMenuItem>


Could any one help me on this , how can we achieve this , with a small piece of sample code

Thanks 

5 Answers, 1 is accepted

Sort by
0
Shinu
Top achievements
Rank 2
answered on 20 Feb 2014, 07:47 AM
Hi Vaibhav,

Please have a look into the following code snippet to add anew item to the RadMenu.

ASPX:
<asp:SiteMapDataSource SiteMapProvider="XmlSiteMapProvider" ShowStartingNode="true"
    ID="SiteMap" runat="server" />
<telerik:RadMenu runat="server" ID="RadMenu1" DataSourceID="SiteMap" OnPreRender="RadMenu1_PreRender">
</telerik:RadMenu>

C#:
protected void RadMenu1_PreRender(object sender, EventArgs e)
{
    RadMenuItem item = new RadMenuItem();
    item.Text = "English";
    RadMenu1.Items.Add(item);
}

Thanks,
Shinu.
0
Vaibhav
Top achievements
Rank 1
answered on 20 Feb 2014, 08:21 AM
Hi Shinu,

With the above code i am able to add a menu , but how to add the itemtemplate to it , which is displayed when i hower the menu??

I want to add a itemtemplate to my menu. Because the div i am talking about is bit complex, it contain image, ul, li, CSS


this is the div which i want to add to the menu with heading say  "Language"
<div class="main"><h2 class="main-title">AROUND THE GLOBE - SELECT YOUR LANGUAGE </h2>
<div class="map"><img src="map.png"/></div>
<div class="col">
<h2>US/CANADA</h2>
<ul><a href="#"><li>english</li></a></ul>
</div><div class="col">
<h2>EMEA</h2>
<ul>
<a href="#"><li>French</li></a>
<a href="#"><li>German</li></a>
<a href="#"><li>Italian</li></a>
<a href="#"><li>Spanish</li></a>
<a href="#"><li>Portuguese</li></a>
<a href="#"><li>Danish</li></a>
<a href="#"><li>Norweigain</li></a>
<a href="#"><li>Finnish</li></a>
<a href="#"><li>Swedish</li></a>
<a href="#"><li>Dutch</li></a>
</ul>
</div><div class="col">
<h2>APAC</h2>
<ul>
<a href="#"><li>Simple Chinese</li></a>
<a href="#"><li>Traditional Chinese</li></a>
<a href="#"><li>Korean</li></a>
<a href="#"><li>Japanese</li></a>
</ul><h2>LATAM</h2>
<ul>
<a href="#"><li>Spanish</li></a>
<a href="#"><li>Portuguese</li></a>
</ul></div>
0
Shinu
Top achievements
Rank 2
answered on 21 Feb 2014, 05:16 AM
Hi Vaibhav,

Please have a look into the following code snippet to add an ItemTemplate in RadMenu.
ASPX:
<telerik:RadMenu runat="server" ID="RadMenu1" DataSourceID="SiteMap">
           <ItemTemplate>
               <div class="main">
                   <h2 class="main-title">
                       AROUND THE GLOBE - SELECT YOUR LANGUAGE
                   </h2>
               </div>
               <div class="map">
                   <img src="map.png" /></div>
               <div class="col">
                   <h2>
                       US/CANADA</h2>
                   <ul>
                       <a href="#">
                           <li>english</li></a></ul>
               </div>
               <div class="col">
                   <h2>
                       EMEA</h2>
                   <ul>
                       <a href="#">
                           <li>French</li></a> <a href="#">
                               <li>German</li></a> <a href="#">
                   </ul>
               </div>
               <div class="col">
                   <h2>
                       APAC</h2>
                   <ul>
                       <a href="#">
                           <li>Simple Chinese</li></a> <a href="#">
                               <li>Traditional Chinese</li></a> <a href="#">
                   </ul>
                   <h2>
                       LATAM</h2>
                   <ul>
                       <a href="#">
                           <li>Spanish</li></a> <a href="#">
                               <li>Portuguese</li></a>
                   </ul>
               </div>
           </ItemTemplate>
       </telerik:RadMenu>

Thanks,
Shinu.
0
Vaibhav
Top achievements
Rank 1
answered on 21 Feb 2014, 07:33 AM
Hi Shinu,

the code which you provided result in creating the item template for each of the menu item from sitemap.
What i need is -
1) Menu should be populated from sitemap as it normally does.
2)After all the menu items from the sitemap , I need to add a new item "Language"
3)On hower of the language my item template(div) should open which i mentioned earlier

Thanks
0
Kate
Telerik team
answered on 25 Feb 2014, 09:44 AM
Hello Vaibhav,

One approach that you can use is to create template from code behind (as fully explained here) and apply it only to the needed items. Please take a look at the following KB here for instance.

Regards,
Kate
Telerik
If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the UI for ASP.NET AJAX, subscribe to the blog feed now.
Tags
Menu
Asked by
Vaibhav
Top achievements
Rank 1
Answers by
Shinu
Top achievements
Rank 2
Vaibhav
Top achievements
Rank 1
Kate
Telerik team
Share this question
or