Altering Context Menu - Client Side

[Andy]

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)

[Shinu]

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.

[Andy]

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?

[Andy]

Got round this, but now get this error:

Error: Unable to get value of the property 'finditemByText': object is null or undefined

[Shinu]

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.

[Andy]

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();

    }
}

[Shinu]

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.