RadContextMenu items on client side: Adding separator

6 posts, 0 answers
  1. Justin
    Justin avatar
    11 posts
    Member since:
    Feb 2011

    Posted 31 May 2011 Link to this post

    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.
  2. Gimmik
    Gimmik avatar
    170 posts
    Member since:
    May 2011

    Posted 31 May 2011 Link to this post

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

    Posted 31 May 2011 Link to this post

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

    Posted 03 Jun 2011 Link to this post

    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

    Browse the vast support resources we have to jump start your development with RadControls for ASP.NET AJAX. See how to integrate our AJAX controls seamlessly in SharePoint 2007/2010 visiting our common SharePoint portal.

  6. Prava kafle
    Prava kafle avatar
    212 posts
    Member since:
    Apr 2010

    Posted 19 Sep 2013 Link to this post

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

    Posted 23 Sep 2013 Link to this post

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