Altering Context Menu - Client Side

7 posts, 0 answers
  1. Andy
    Andy avatar
    16 posts
    Member since:
    Jun 2014

    Posted 16 Jul 2014 Link to this post

    Hi,

    I’m trying to program the context menu (client side) to
    display different  menus based upon the
    node that is clicked on.

    So far I have managed to get the system to work out which
    node its on:
     

                
    var NodeType = args._node.get_attributes().getAttribute("type1");
     
    if (NodeType == "position") {
         
    }
    else if (NodeType == "serial") {
    }

     

    But I’m having no success is determining how to change the
    context menu – Any suggestions (I’m very new to javascript)

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

    Posted 16 Jul 2014 in reply to Andy Link to this post

    Hi Andy,

    Try to attach the OnClientContextMenuShowing event of RadTreeView and show/hide the contextmenu item based on the selected node.

    JavaScript:
    function showMenu(sender, args) {
          var contextmenu = $find("<%=RadTreeVewContextMenu1.ClientID %>");
          if (args.get_node().get_text() == "position") {
              contextmenu.findItemByText("New").hide();
              contextmenu.findItemByText("Add").show()
              contextmenu.findItemByText("Delete").show();
              contextmenu.findItemByText("Update").show();
          }
          else {
              contextmenu.findItemByText("New").hide();
              contextmenu.findItemByText("Add").hide();
              contextmenu.findItemByText("Delete").hide();
              contextmenu.findItemByText("Update").show();
          }
      }

    Thanks,
    Shinu.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Andy
    Andy avatar
    16 posts
    Member since:
    Jun 2014

    Posted 16 Jul 2014 in reply to Shinu Link to this post

    Thanks for the suggestion.  I've tried it but when the page opens I get an error message:

    The Controls collection cannot be modified because the control contains code
    blocks (i.e. <% ... %>).

    Any ideas?
  5. Andy
    Andy avatar
    16 posts
    Member since:
    Jun 2014

    Posted 16 Jul 2014 in reply to Andy Link to this post

    Got round this, but now get this error:

    Error: Unable to get value of the property 'finditemByText': object is null or undefined
  6. Shinu
    Shinu avatar
    17764 posts
    Member since:
    Mar 2007

    Posted 16 Jul 2014 in reply to Andy Link to this post

    Hi Andy,

    From your last post I have noticed you are using 'finditemByText'  method. The correct way of using this method is findItemByText. The 'I' should be in capital letter. Please do the modification in your code snippet and let me know if you have any concern.

    Thanks,
    Shinu.
  7. Andy
    Andy avatar
    16 posts
    Member since:
    Jun 2014

    Posted 17 Jul 2014 in reply to Shinu Link to this post

    Hi Shinu,

    Thanks for the reply.  I gave it a try but the same error still appears> Here is all the code in case I've overlooked something

    <telerik:RadTreeView ID="RadTreeView1" runat="server" OnNodeClick="RadTreeView1_NodeClick"
        Visible="True" Skin="Default" OnClientContextMenuItemClicked="SetPlaceHolders" OnClientContextMenuShowing="showMenu">
        <ContextMenus>
            <telerik:RadTreeViewContextMenu ID="RadTreeViewContextMenu1" runat="server" ResolvedRenderMode="Classic">
                <Items>
                    <telerik:RadMenuItem runat="server" Text="Delete">
                    </telerik:RadMenuItem>
                    <telerik:RadMenuItem runat="server" Text="Add">
                    </telerik:RadMenuItem>
                    <telerik:RadMenuItem runat="server" Text="Export">
                    </telerik:RadMenuItem>
                </Items>
            </telerik:RadTreeViewContextMenu>
        </ContextMenus>
    </telerik:RadTreeView>

    and here is the javascript
    function showMenu(sender, args) {
        var contextmenu = $find("<%=RadTreeViewContextMenu1.ClientID %>");
        var NodeType = args._node.get_attributes().getAttribute("type1");
        if (NodeType == "position") {
            contextmenu.findItemByText("Export").hide();
        }
        else {
            contextmenu.findItemByText("Export").show();
     
        }
    }
  8. Shinu
    Shinu avatar
    17764 posts
    Member since:
    Mar 2007

    Posted 17 Jul 2014 in reply to Andy Link to this post

    Hi Andy,

    Unfortunately I couldn't replicate the issue at my end. Please have a look into the sample code snippet which works fine at my end.

    ASPX:
    <telerik:RadTreeView ID="RadTreeView1" runat="server" OnClientContextMenuShowing="showMenu">
        <ContextMenus>
            <telerik:RadTreeViewContextMenu ID="RadTreeViewContextMenu1" runat="server" ResolvedRenderMode="Classic">
                <Items>
                    <telerik:RadMenuItem runat="server" Text="Delete">
                    </telerik:RadMenuItem>
                    <telerik:RadMenuItem runat="server" Text="Add">
                    </telerik:RadMenuItem>
                    <telerik:RadMenuItem runat="server" Text="Export">
                    </telerik:RadMenuItem>
                </Items>
            </telerik:RadTreeViewContextMenu>
        </ContextMenus>
        <Nodes>
            <telerik:RadTreeNode runat="server" Text="position" ContextMenuID="RadTreeViewContextMenu1">
            </telerik:RadTreeNode>
            <telerik:RadTreeNode runat="server" Text="serial" ContextMenuID="RadTreeViewContextMenu1">
            </telerik:RadTreeNode>
        </Nodes>
    </telerik:RadTreeView>

    JavaScript:
    function showMenu(sender, args) {
        var contextmenu = $find("<%=RadTreeViewContextMenu1.ClientID %>");
        var NodeType = args._node.get_attributes().getAttribute("type1");
        if (NodeType == "position") {
            contextmenu.findItemByText("Export").hide();
        }
        else {
            contextmenu.findItemByText("Export").show();
        }
    }

    C#:
    protected void Page_Load(object sender, EventArgs e)
    {
        RadTreeNode node = (RadTreeNode)RadTreeView1.Nodes.FindNodeByText("position");
        node.Attributes["type1"] = "position";
        RadTreeNode node1 = (RadTreeNode)RadTreeView1.Nodes.FindNodeByText("serial");
        node1.Attributes["type1"] = "serial";
    }

    Thanks,
    Shinu.
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017