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

6 posts, 0 answers
  1. Vaibhav
    Vaibhav avatar
    15 posts
    Member since:
    Feb 2014

    Posted 20 Feb 2014 Link to this post

    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 

  2. Shinu
    Shinu avatar
    17764 posts
    Member since:
    Mar 2007

    Posted 20 Feb 2014 in reply to Vaibhav Link to this post

    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.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Vaibhav
    Vaibhav avatar
    15 posts
    Member since:
    Feb 2014

    Posted 20 Feb 2014 Link to this post

    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>
  5. Shinu
    Shinu avatar
    17764 posts
    Member since:
    Mar 2007

    Posted 20 Feb 2014 in reply to Vaibhav Link to this post

    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.
  6. Vaibhav
    Vaibhav avatar
    15 posts
    Member since:
    Feb 2014

    Posted 21 Feb 2014 in reply to Shinu Link to this post

    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
  7. Kate
    Admin
    Kate avatar
    1898 posts

    Posted 25 Feb 2014 Link to this post

    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.
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017