RadContextMenu items on client side: Adding separator

[Justin]

Hello. I have a RadContextMenu attached to a RadGrid. The issue is that the RadContextMenu is going to have different items in it based on the security level under which the user is signed in. I already have this working. I have an OnRowContextMenu event that calls a client side function wirtten in JavaScript. As you can see below, I am successfully adding items based on the user's security level. My question is that I want to add a separator between two menu items. The IsSeparator property works fine in the XML, but I can't get it working when I am adding the menu items on the client side.

function RowContextMenu(sender, eventArgs) {

   var menu; 

   menu = $find("<%=RadMenu.ClientID %>"); 

    // Set securityLevelLabel to be a hidden field set elsewhere, code deleted for clarity


  

   // Add items to the context menu based on the security level of the user

   if (securityLevelLabel.innerText == "view") {

      // Look at next block for example

   }

   else if (securityLevelLabel.innerText == "normal") {

      var menuItem = new Telerik.Web.UI.RadMenuItem();

      menuItem.set_text("View Details");

      menu.trackChanges();

      menu.get_items().add(menuItem);

      // ***** I WANT A SEPARATOR HERE **********

      menuItem = new Telerik.Web.UI.RadMenuItem();

      menuItem.set_text("Add");

      menu.trackChanges();

      menu.get_items().add(menuItem);

      menu.commitChanges();

   }

   else

   {

      // Code deleted for clarity

   }

}

This is what I want the context menu to look like:
View Details
----------------
Add

Thanks in advance for the help.

-------------------------------------------------------

ANOTHER QUESTION: Is there way to clear all the items out on the client side. As it stands now, every time I go into the function all the menu items are being added again and again, growing the list. On the server side, I can do: RadMenu.Items.Clear() but so far I have been unable to find a way to do this on the client side.

[Gimmik]

Hi Justin,

I looked into this a little bit because it sounded like it should have been simple. It turned out to not be very simple at all. Unfortunately, the isSeparator property is only server-side. Perhaps this is something Telerik will change later, but for right now there doesn't seem to be a way to add a separator on the client-side. Maybe there is a work-around that will work for you. For example, if you always know that you want two separators in the RadContextMenu, you can add them when the page loads. Then you just need to use a little programming logic to insert your menu items into the correct location relative to the separators. It may also be easier for you to build your whole context menu server-side.

Regarding the RadContextMenu growing on each click. I can think of a few different ways to fix this off the top of my head. A simple method to to create a global in JavaScript like "CreatedContext = false; " Then just check if this global is false before entering the function that generates the RadContextMenu, otherwise the function does nothing. Just make sure to set the global to true at the end of your method.

A superior option to to wire-up and event that only runs once, instead of the "OnRowContextMenu" event. You might try the onLoad event for the context menu.

Hopefully this is enough to get you started.
-Gimmik

[Justin]

Gimmik:

Thank you for your reply. I found this forum post below:

http://www.telerik.com/community/forums/aspnet-ajax/menu/add-items-to-single-radcontextmenu-based-on-target.aspx

That suggests that if you have different context menus based on permission that you create separate context menus for each permission set and then show/hide each one appropriately. We ruled against this approach because it could get unwieldy as you could have 6 or 7 permission sets. Therefore, we opted to add the items in the client side code.

I was surprised to hear that you can't add a separator on the client side. Telerik, if you are reading this, could you please put in a change request to implement this in the next release?

Thanks again for your reply. You confirmed what I already discovered about the separator. I was able to get the "multiple item" problem solved by doing it in the JavaScript onload function as you suggested.

Justin

[Kate]

Hello Justin,

Thank you for your interest. I logged your request in our internal system as a future request. However, I can not give any time frame when it will be implemented. We will do our best to include it as soon as possible.  

Regards,
Kate
the Telerik team

[Prava kafle]

Hi Kate,

Is this functionality available in current version? If yes, how do I implement it?
I checked client API but could not find any property or method to do so.


Thanks,
Prava

[Kate]

Hello Prava,

When adding items on the client side you can easily add a separator as well. You can use the following javascript code below as an example:

<script>
           function OnClientLoad(sender, args) {
               sender.trackChanges();
               var menuItem1 = new Telerik.Web.UI.RadMenuItem();
               menuItem1.set_text("View Details");
               sender.get_items().add(menuItem1);
               // ***** A SEPARATOR HERE GOES HERE **********

               menuItem = new Telerik.Web.UI.RadMenuItem();
               menuItem.set_isSeparator(true);

               sender.get_items().add(menuItem);

               var menuItem2 = new Telerik.Web.UI.RadMenuItem();
               menuItem1.set_text("View Details");
               sender.get_items().add(menuItem2);

               sender.commitChanges();

           }
       </script>

Regards,
Kate
Telerik