Context Menu with Databound TreeView

[Shaun Peet]

The QSF examples use a TreeView with it's nodes defined in the markup.  I cannot get the ContextMenu to work with a databound treeview.  I have tried

1) Setting the ID of the context menu in the markup and then setting the contextmenuID for each node in the nodedatabound event
2) Remvoing the ID of the context menu and allowing every node to "automatically" use the only context menu that is defined
3) In both cases above, added a "dummy" node in the markup (which gets replaced when the control gets databound)

What's worse, the expand/collapse fails in all cases.

More info...

If I copy/paste the QSF treeview below my databound treeview, the context menu works for the QSF  treeview AND the expand/collapse works again for my treeview BUT the context menu still does not work for my treeview.

[Erjan Gavalji]

Hi Shaun,

I'm sorry for this indeed bad bug. The problem happens, because RadTreeView clears all its controls when databound. We already fixed the problem and the fix will be available in the official service pack.

Currently, a workaround is to re-add the context menus to the treeview, using code similar to:

RadTreeView1.DataBind();

for (int i=RadTreeView1.ContextMenus.Count-1; i>=0; i--)
{
RadTreeViewContextMenu contextMenu = RadTreeView1.ContextMenus[i];
RadTreeView1.ContextMenus.RemoveAt(i);
RadTreeView1.ContextMenus.AddAt(contextMenu, i);
}

I hope this helps.

Kind regards,
Erjan Gavalji
the Telerik team

Instantly find answers to your questions at the new Telerik Support Center

[Shaun Peet]

Is that javascript or C#?

[Shaun Peet]

The following does not work:

<telerik:RadTreeView ID="rtvPages" runat="server" OnClientContextMenuShowing="cm_show" OnClientContextMenuItemClicked="cm_click" Width="240px" Height="220px" DataFieldID="ID" DataFieldParentID="parentID" DataSourceID="dsPages" DataTextField="title" DataValueField="ID">

<ContextMenus>

<telerik:RadTreeViewContextMenu runat="server" ID="CM">

<Items>

<telerik:RadMenuItem Value="ED" Text="Edit Page" ImageUrl="~/App_Themes/CP/Icons/Edit.gif" />

<telerik:RadMenuItem Value="HL" Text="Toggle Highlighting" ImageUrl="~/App_Themes/CP/Icons/Edit.gif" />

<telerik:RadMenuItem Value="SI" Text="New Sibling Page" ImageUrl="~/App_Themes/CP/Icons/AddRecord.gif" />

<telerik:RadMenuItem Value="CH" Text="New Child Page" ImageUrl="~/App_Themes/CP/Icons/AddRecord.gif" />

<telerik:RadMenuItem Value="DE" Text="Delete Page" ImageUrl="~/App_Themes/CP/Icons/Delete.gif" />

</Items>

</telerik:RadTreeViewContextMenu>

</ContextMenus>

</telerik:RadTreeView>

Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs)

If Not IsPostBack Then

FixBroxenTreeView()

rtvPages.ExpandAllNodes()

End If

End Sub

Private Sub FixBroxenTreeView()

rtvPages.DataBind()

For i As Integer = 0 To rtvPages.ContextMenus.Count - 1

Dim cm As RadTreeViewContextMenu = rtvPages.ContextMenus(i)

rtvPages.ContextMenus.RemoveAt(i)

rtvPages.ContextMenus.Add(cm)

Next

End Sub

<

script type="text/javascript">

function ShowEditPageForm(ID, HFID) { OpenModal('../Modals/Page.aspx?ID=' + ID +'&HFID=' + HFID); return false; }

function cm_show(sender, args) {

cm_setState(args.get_menu().get_items(), args.get_node());

}

function cm_click(sender, args) {

var menuItem = args.get_menuItem();

var treeNode = args.get_node();

switch(menuItem.get_value()) {

case "ED":

var HFID = $find("<%= hfUC.ClientID() %>").ClientID();

ShowEditPageForm(treeNode.get_value(), HFID);

break;

case "HL":

break;

case "SI":

break;

case "CH":

break;

case "DE":

break;

}

}

function cm_setState(menuItems, treeNode) {

for (var i = 0; i < menuItems.get_count(); i++) {

var menuItem = menuItems.getItem(i);

switch(menuItem.get_value()) {

case "ED":

break;

case "HL":

if (treeNode.get_parent() == treeNode.get_treeView()) {

menuItem.set_enabled(

true);

}

else {

menuItem.set_enabled(

false);

}

break;

case "SI":

break;

case "CH":

break;

case "DE":

if (treeNode.get_nodes().get_count() > 0) {

menuItem.set_enabled(

false);

}

else {

menuItem.set_enabled(

true);

}

break;

}

}

}

</

script>

This is all placed in a UserControl that is dynamically loaded.  The result of this is a "Microsoft JScript runtime error: 'childNodes' is null or not an object" in what appears to be the Telerik animations dynamic script on the initial loading of the page.

No context menu and no expand / collapse.

I *really* need this to work asap as I've already migrated my project to the Prometheus TreeView in hopes that we wouldn't have another Editor.

[Shaun Peet]

The Trial Hotfix that was posted in the radComboBox forum thread below also has fixed the ContextMenu issue for the TreeView.  As I said in the other forum though, this project is used in production and a Trial Hotfix is no good to me.  Please let me know when there will be a dev hotfix available.  Thanks!

http://www.telerik.com/community/forums/thread/b311D-bbcehm.aspx

[Nikolay]

Hi Shaun,

If you need to get a dev version, please open a support ticket and we will attach there a dev version of this build. We do not attach dev versions to our forum threads.

Regards,
Nick
the Telerik team

Instantly find answers to your questions at the new Telerik Support Center

[Shaun Peet]

Done.  Ticket ID 113534

[Shaun Peet]

It appears that all is now well with the TreeView with that update.  Thanks.

[N]

What about the following two issues, are they fixed too? I need them desperately for my project:

1) Attaching the context menu to nodes created on the client-side.The following javascript does not work. The nodes are added fine, but the context menu does not appear on right mouse click:

        var node = new Telerik.Web.UI.RadTreeNode();
        node.set_text(myNodeName);
        node.set_value(myNodeValue);
        node.set_contextMenuID("menuProducts");
        tree.get_nodes().add(node);


2) Client-side dropPosition is always 'undefined' as in this JavaScipt:

function onClientNodeDropping(tree, args) {

  var dropPosition = args.get_dropPosition();
  //dropPosition is always 'undefined' !!!
...
}

[Dimitar Milushev]

Hi Nuri,

Up to your questions:

1. The client-side ID of the RadTreeViewContextMenu is based on the ID of the containing RadTreeView. To get  the context menu ClientID resolved properly you should use the following syntax:
   node.set_contextMenuID("<%=RadTreeView1.ContextMenus[1].ClientID %>");
2. This indeed turned out to be a bug on our side. It will be fixed in the next "Prometheus" SP. If you would like, you can open a support ticket and we will send you the latest build of the "Prometheus" suite which has this issue fixed.

Thank you for your understanding and involvement.

Kind regards,
Dimitar Milushev
the Telerik team

Instantly find answers to your questions at the new Telerik Support Center

[N]

Hi Dimitar,

Thanks. I've submitted a ticket for issue two above. As for issue one, I'm still having problems. I've tried your suggestion:

node.set_contextMenuID("<%=RadTreeView1.ContextMenus[0].ClientID %>");

and also this:

node.set_contextMenuID(radTreeView1.get_ContextMenuIDs()[0]);

But I get the following JavaScript error when I right click on the tree node to show the context menu:

Microsoft JScript runtime error: 'this.get_element().parentNode' is null or not an object.

on the below red line (line 203 in the context menu JavaScript file):

_detach:

function(){
if(Telerik.Web.Browser.agent!=Telerik.Web.Browser.InternetExplorer||document.readyState=="complete"){
this.get_element().parentNode.removeChild(this.get_element());
document.forms[0].insertBefore(this.get_element(),document.forms[0].firstChild);
this._detached=true;
}

Cheers,
Nuri

[Erjan Gavalji]

Hi Nuri,

You've encountered a problem we already fixed after that build. It is also fixed currently and the latest available build can be found hereby.

It contains a number of fixes, but still not as stable as the official service pack of the control, to be released early next year, so please, bear with us some more.

By the way, my colleague Dimitar has already sent you the dev version of the same build through the support ticket.

Kind regards,
Erjan Gavalji
the Telerik team

Instantly find answers to your questions at the new Telerik Support Center

[N]

Hi again,

In the current DLL version (2007.3.1425.35) has client-side treenode context menu assignment changed? In other words, Dimitar's comment above says: 

The client-side ID of the RadTreeViewContextMenu is based on the ID of the containing RadTreeView. To get  the context menu ClientID resolved properly you should use the following syntax:
node.set_contextMenuID(radTreeView1.get_ContextMenuIDs()[0]);


...that seems to not work any more but specifying the direct name of the context menu does work:

node.set_contextMenuID("Menu1");

[Erjan Gavalji]

Hi Nuri,

We changed the logic in context menu ID assignment on the client, because we found it more convenient for customers. Now the set_contextMenuID method expects just the ID property of the ContextMenu.

To my regret we introduced a bug by not removing the server-side contextMenuID resolving.

Thank you for reporting this. Your Telerik account was updated. Please, find attached an internal build I just prepared. Please, do not hesitate to open a support ticket shall you need the dev version.

Kind regards,
Erjan Gavalji
the Telerik team

Instantly find answers to your questions at the new Telerik Support Center