adding/deleting RibbonBarMenuItems javascript clientside

[Pieter]

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

[Ivan Zhekov]

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

[Pieter]

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

[Ivan Zhekov]

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

[Tim]

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.

[Tim]

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,

[Kate]

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

[Tim]

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,

[Kate]

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