adding/deleting RibbonBarMenuItems javascript clientside

9 posts, 0 answers
  1. Pieter
    Pieter avatar
    7 posts
    Member since:
    May 2012

    Posted 23 Jun 2012 Link to this post

    Hi All!

    I am trying to insert/delete RibbonBarMenuItems in RibbonBarMenu using Javascript clientside.
    I cannot find any documentation on how this is done.

    I have tried doing it the same as it is done in RadMenu:
        menu.trackChanges();
        menu.get_items().add(item);
        menu.commitChanges();
    but this attempt was unsuccessful.

    Any help will be much appreciated.
    Thanks in advance!!
    PieterDevill
  2. Ivan Zhekov
    Admin
    Ivan Zhekov avatar
    539 posts

    Posted 28 Jun 2012 Link to this post

    Hi, Peter.

    That should be possible, since the menu in the ribbon IS a rad menu. More over, I tested locally and I am able to add items.

    Can you attach a sample page so we could look at your case and see if we are missing something.

    Kind regards,
    Ivan Zhekov
    the Telerik team
    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 RadControls for ASP.NET AJAX, subscribe to their blog feed now.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Pieter
    Pieter avatar
    7 posts
    Member since:
    May 2012

    Posted 06 Jul 2012 Link to this post

    Hi Ivan!

    This is what I've tried:

    var ribbonbar = $find("RadRibbonBar1");
    var tab0 = ribbonbar.get_tabs().getTab(0); 
    var group0 = tab0.get_groups().getGroup(1); 
    var myRibbonBarMenu = group0.get_items().getItem(1); // THIS DOES RETURN THE CORRECT ITEM

    var childItem = new Telerik.Web.UI.RibbonBarMenuItem(); 
    childItem.set_text("test"); 

    myRibbonBarMenu.get_items().add(childItem);

    however this does not seem to work. Also I am not sure where to use the trackChanges() and commitChanges() methods.

    I have done this successfully with RadMenu but cant seem to get it working in RadRibbonBarMenu.

    Thanks in advance!
    PieterDevill
  5. Ivan Zhekov
    Admin
    Ivan Zhekov avatar
    539 posts

    Posted 10 Jul 2012 Link to this post

    Hello, Peter.

    I see where the problem is. We have named that item incorrectly a "Menu". In fact it's a menu button and has little or nothing to do with a menu.

    So far we do not have rich client side API for that part of the ribbon and I can't tell when we are going to implement it. That's definitely a reasonable feature so we'll evaluate it.

    Regards,
    Ivan Zhekov
    the Telerik team
    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 RadControls for ASP.NET AJAX, subscribe to their blog feed now.
  6. Tim
    Tim avatar
    16 posts
    Member since:
    Jul 2012

    Posted 13 Feb 2013 Link to this post

    This has to be the most useless non answer of a straight forward question or request.

    How do you dynamically add Menu Items to the RadRibbonBar?

    I can successfully instantiate a new RibbonBarMenuItem and add it.  The problem is that none of the other properties populate.


    var rootMenuItem= group.get_items(0).getItem(0);
     
    new Telerik.Web.UI.RibbonBarMenuItem();
    childItem.set_text("New Child Item");
    childItem.set_imageUrl("icons/itemIcon.gif") ;
     
    rootMenuItem.get_items().add( childItem);



    What are the steps in code to add a new item.  Please simply add a code snippet.

  7. Tim
    Tim avatar
    16 posts
    Member since:
    Jul 2012

    Posted 13 Feb 2013 Link to this post

    The work around is to prepopulate the RadRibbonBarMenuItems with a list of menu items.


    Then delete all but the number needed and then assign the remaining ones the values you need:


    var ribbonbar = $find("RadRibbonBarMain");
        var tabHome = ribbonbar.get_tabs().getTab(0);
        var group = tabHome.get_groups().getGroup(1);
        var menu = group.get_items(0).getItem(0);
        var menuItems = menu.get_items()._array;
         
         
        var itemcount = menuItems.length;
            for (var i = myItems.length - 1; i < itemcount; i++) {
            menuItems.removeAt(myItems.length);
        }
     
        $.each(myItems, function (key, val) {
            menuItems[key].set_text(val.title);
            menuItems[key].set_imageUrl(val.thumbnailUrl);
         
     
        });


    You can do the same for the Application Menu.  It works fine.

    Let me know if anyone has the actual steps to do it without prepopulating the html.


    Cheers,

  8. Kate
    Admin
    Kate avatar
    1898 posts

    Posted 18 Feb 2013 Link to this post

    Hello Kori,

    Unfortunately in contrast to the RadMenu control with the RibbonBarApplicationMenu currently you can not add items to the menu that will persist after a postback of the page. Therefore I would suggest that you use the server-side approach:
    //creating application menu
           RibbonBarApplicationMenu applicationMenu1 = new RibbonBarApplicationMenu();
           applicationMenu1.ID = "applicationMenu1";
           applicationMenu1.Text = "MenuAddedInCodeBehind";
           form1.Controls.Add(applicationMenu1);
           RibbonBarApplicationMenuItem child1 = new RibbonBarApplicationMenuItem();
           child1.Text = "item1";
           RibbonBarApplicationMenuItem child2 = new RibbonBarApplicationMenuItem();
           child2.Text = "item2";
           applicationMenu1.Items.Add(child1);
           applicationMenu1.Items.Add(child2);
           RadRibbonBar2.ApplicationMenuID = "applicationMenu1";

    All the best,
    Kate
    the Telerik team
    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 RadControls for ASP.NET AJAX, subscribe to their blog feed now.
  9. Tim
    Tim avatar
    16 posts
    Member since:
    Jul 2012

    Posted 18 Feb 2013 Link to this post

    Hi Kate,

    I am using MVC, so I cannot utilize server-side.

    The .removeAt is available for application menu, but not a regular menu.  So you have to use the style.display tactic.

    So you have to do the following - Pre-populate the menu with menu items:

    var ribbonbar = $find("RadRibbonBarMain");
    var tabHome = ribbonbar.get_tabs().getTab(0);
    var group = tabHome.get_groups().getGroup(1);
    var menu = group.get_items(0).getItem(0);
    var menuItems = menu.get_items()._array;
      
      
    var itemcount = menuItems.length;
        for (var i = myItems.length - 1; i < itemcount; i++) {
        menuItems.getItem(i).get_element().style.display = "none";
    }
     
    $.each(myItems, function (key, val) {
        menuItems.getItem(key).set_text(name);
          menuItems.getItem(key).set_value(id)
          menuItems.getItem(key).set_toolTip(name);
          menuItems.getItem(key).get_element().title = name;
          menuItems.getItem(key).get_element().style.display = "block";
    });

    Cheers,
  10. Kate
    Admin
    Kate avatar
    1898 posts

    Posted 21 Feb 2013 Link to this post

    Hi Kori,

    Thank you for sharing your approach in the forum here since I believe it will be helpful for other developers that might be trying to achieve the same or similar results. As a token of gratitude I updated your Telerik points.

    Greetings,
    Kate
    the Telerik team
    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 RadControls for ASP.NET AJAX, subscribe to their blog feed now.
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017