Context Menu unavailable when it plus its grid dragdrop moved into a USerCtl

[Neal]

I used one of the Telerik Examples which had ContextMenus on a Grid and a Treeview,..Edit and Delete functions etc, Swap TreeNodes around,..
but as is in a form it runs perfectly,
but once migrated into a user control,..RadPanes and splitters removed and replaced with aspPanels, the Context Menus are unavailble (as is any drag n drop functionality.)

I have obviously left something out ..
OffHand?? any ideas/reason/...

I have added the code beneath, in case  :)

TIA
Neal

<!---Script for Drag n Drop funcionality -->

<script type="text/javascript" src="dragdrop.js"></script>

<!---Script for Form ContextMenu functionality -->

<script type="text/javascript">

function GridContextMenu(sender, args)

{

sender.Hide();

}

function RowContextMenu(index, e)

{

this.SelectRow(this.Rows[index].Control, true)

}

function ContextMenuClick(node, itemText)

{

if (itemText == "Rename Node")

{

node.StartEdit();

}

return true;

}

function MenuClick(sender, args)

{

if (args.Item.Text == "Rename Node")

{

var treeview = <%= RadTreeView1.ClientID %>

if (treeview.SelectedNode != null)

{

treeview.SelectedNode.StartEdit();

}

}

}

function MenuClose()

{

var menu = <%= RadMenu1.ClientID %>;

menu.Close();

}

</script>

<!-- content start -->

<div class="wrapper">

<div class="wrapper2">

<h3 class="browser"></h3>

<div class="wrapper3">

<radM:RadMenu ID="RadMenu1" runat="server"

Skin="Vista"

Width="60%"

OnItemClick="RadMenu1_ItemClick"

OnClientItemClicked="MenuClick" BorderWidth="0"

>

<Items>

<radM:RadMenuItem ID="RadMenuItem1" runat="server">

<Items>

<radM:RadMenuItem ID="RadMenuItem2" Text="New Node" runat="server"

ImageUrl="~/Images/new.gif" Enabled="false" />

<radM:RadMenuItem ID="RadMenuItem3" Text="Delete Node" runat="server"

ImageUrl="~/Images/delete.gif" Enabled="false" />

<radM:RadMenuItem ID="RadMenuItem4" Text="Rename Node" runat="server"

ImageUrl="~/Images/rename.gif" Enabled="false" />

</Items>

</radM:RadMenuItem>

<radM:RadMenuItem ID="RadMenuItem5" runat="server">

<Items>

<radM:RadMenuItem ID="RadMenuItem6" Text="Copy Node" runat="server"

ImageUrl="~DemoImages/copy.gif" Enabled="false" />

<radM:RadMenuItem ID="RadMenuItem7" Text="Paste Node" runat="server"

ImageUrl="~/Images/paste.gif" Enabled="false" />

</Items>

</radM:RadMenuItem>

</Items>

</radM:RadMenu>

<div class="innerWrapper" style="width: 80%">

<asp:Panel ID="RadPaneTreeView" runat="server"

CssClass="RadPaneTreeView" Width="80%" >

<div class="leftPaneHeader">Folders</div>

<radT:RadTreeView ID="RadTreeView1" runat="server"

AutoPostBack="True"

OnNodeClick="RadTreeView1_NodeClick"

Width="100%"

Height="99%"

BeforeClientContextClick="ContextMenuClick"

AllowNodeEditing="True"

OnNodeEdit="RadTreeView1_NodeEdit"

AccessKey="T"

DragAndDrop="True"

OnNodeDrop="RadTreeView1_NodeDrop"

OnNodeExpand="RadTreeView1_NodeExpand"

>

</radT:RadTreeView>

</asp:Panel>

 

<asp:Panel ID="RadPaneGrid" runat="server"

CssClass="RadPaneGrid" Width="80%">

<radG:RadGrid ID="RadGrid1" runat="server"

AutoGenerateColumns="False"

GridLines="None"

Width="70%"

Height="90%"

OnItemDataBound="RadGrid1_ItemDataBound"

OnNeedDataSource="RadGrid1_NeedDataSource1"

BorderWidth="0"

>

<MasterTableView Width="70%">

<Columns>

<radG:GridTemplateColumn

HeaderText="Name" SortExpression="Name"

UniqueName="Name">

<ItemTemplate>

<asp:Image ID="icon" runat="server" />

<asp:Label ID="itemLabel" runat="server"

Text='<%# Eval("Name") %>'></asp:Label>

</ItemTemplate>

<ItemStyle BorderStyle="None" />

</radG:GridTemplateColumn>

<radG:GridTemplateColumn

HeaderText="Size" SortExpression="Size"

UniqueName="Size" >

<HeaderStyle Width="100px" />

<ItemStyle BorderStyle="None" Width="100px"/>

</radG:GridTemplateColumn>

</Columns>

<ExpandCollapseColumn Visible="False">

<HeaderStyle Width="19px" />

</ExpandCollapseColumn>

<RowIndicatorColumn Visible="False">

<HeaderStyle Width="20px" />

</RowIndicatorColumn>

</MasterTableView>

<ItemStyle BorderStyle="None" />

<ClientSettings ApplyStylesOnClient="True"

ReorderColumnsOnClient="True">

<Selecting AllowRowSelect="True" />

<Resizing AllowColumnResize="True" />

<Scrolling AllowScroll="True" UseStaticHeaders="True"

ScrollHeight="99.9%" />

<ClientEvents OnRowContextMenu="RowContextMenu"

OnRowCreated="RowCreated" />

</ClientSettings>

<HeaderStyle BorderColor="DarkGray"

BorderStyle="Solid" BorderWidth="1px" />

</radG:RadGrid>

</asp:Panel>

</div>

<radM:RadMenu ID="treeContextMenu" runat="server"

IsContext="true"

ContextMenuElementID="RadTreeView1"

Style="left: 2px"

OnItemClick="RadMenu1_ItemClick"

OnClientItemClicked="MenuClick"

>

<Items>

<radM:RadMenuItem Text="New Node" ImageUrl="~/Images/new.gif" />

<radM:RadMenuItem Text="Delete Node" ImageUrl="~/Images/delete.gif" />

<radM:RadMenuItem Text="Rename Node" ImageUrl="~/Images/rename.gif" />

<radM:RadMenuItem IsSeparator="true" />

<radM:RadMenuItem Text="Copy Node" ImageUrl="~/Images/copy.gif" />

<radM:RadMenuItem Text="Paste Node" ImageUrl="~/Images/paste.gif" />

</Items>

</radM:RadMenu>

<radM:RadMenu ID="gridContextMenu" runat="server"

IsContext="true"

ContextMenuElementID="RadGrid1"

OnItemClick="gridContextMenu_ItemClick"

OnClientItemClicked="GridContextMenu"

>

<Items>

<radM:RadMenuItem Text="Delete" ImageUrl="~/Images/delete.gif" />

<radM:RadMenuItem IsSeparator="true" />

<radM:RadMenuItem Text="Copy" ImageUrl="~/Images/copy.gif" />

<radM:RadMenuItem Text="Paste" ImageUrl="~/Images/paste.gif" />

</Items>

</radM:RadMenu>

</div>

<div class="footer">

<radA:AjaxLoadingPanel ID="AjaxLoadingPanel1" runat="server" Height="75px" Width="275px"

IsSticky="True" >

<asp:Image ID="Image1" runat="server" AlternateText="Loading..."

ImageUrl="~/RadControls/Ajax/Skins/Default/loadingProgressBar.gif"

CssClass="UpdateImage"/> Updating...

</radA:AjaxLoadingPanel>

</div>

</div>

</div>

.cs
=====

protected void Page_Load(object sender, EventArgs e)

{

//if (!IsPostBack)

//{

//Initial Direcory and Server on which it is...ex Dbase.ex Config settings Menu

initialDirectory =

WebConfigurationManager.AppSettings["DRM: InitialDocFolder"];

//##ToDo: Set the InitialDirectory according to User (DM or SAPS or MP or Roadsn or Traffic or Ambulance etc)

//..........into web.config

initialDirectory = @initialDirectory;

string[] Dirs = Directory.GetDirectories(@"C:\");

LoadTreeView(initialDirectory);

RadMenu1.FindItemByText(

"Rename Node").PostBack = false;

treeContextMenu.FindItemByText(

"Rename Node").PostBack = false;

// }

}

private void LoadTreeView(string folder)

{

RadTreeNode rootNode = new RadTreeNode("Root");

rootNode.ImageUrl =

"../Images/mailfolder.gif";

rootNode.Expanded =

true;

rootNode.Category =

"Folder";

rootNode.Value = folder;

rootNode.ContextMenuName =

"File";

RadTreeView1.Nodes.Add(rootNode);

CurrentDir = GetFileList(folder);

BindDirectory(folder, rootNode.Nodes);

}

etc

and 

protected

void gridContextMenu_ItemClick(object sender, RadMenuEventArgs e)
and 

private

void ChangeMenuItemsState(RadMenu treeviewMenu)
and

protected

void RadMenu1_ItemClick(object sender, RadMenuEventArgs e)

which handle the menu item clicked,  eg Copy Edit Delete, NewNode, DeleteNode...

[Atanas Korchev]

Hi Neal,

The ContextMenuElementID should be set to the value of the rendered "id" of the element. When asp.net controls are put inside a UserControl their rendered id differs from their server ID property. You should set the ContextMenuElementID properties of your context menus from code behind. Use the ClientID property (always the same as the rendered id) of the target controls:

treeContextMenu.ContextMenuElementID = RadTreeView1.ClientID

What do you mean by "drag and drop is unavailable"? The drag and drop capabilities of RadTreeView should work correctly in user controls. Are there any JavaScript errors appearing in your page?

Regards,
Albert
the Telerik team

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

[Neal]

Thanks Albert,

That worked fine, I added the GridContext menu similarly, so the Context Menu on the Grid is also visible now.
Tree View Node dragging is fine as well,
and No to Java Script errors.

Just, my drag of Grid Rows is null and void.

I reference it with 

<script type="text/javascript" src="dragdrop.js"></script>

which works fine in a normal aspx page, but not as/on aUserControl.

Something I need to do?

Thx
Neal

[Atanas Korchev]

Hello Neal,

Maybe the problem is again related with the ID - ClientID difference when some control is moved in a user control. Please check for any hardcoded "ID" values in your JavaScript file and replace them with the actually rendered "id" attributes.

Regards,
Albert
the Telerik team

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

[Neal]

Hi Albert,
Seems the problem is it is not loading/firing the js. functions. No hardcoded id's in the js either.

<style type="text/css">

.........

}

</style>

<link rel="stylesheet" type="text/css" href="Style.css" />

<!---Script for Drag n Drop funcionality -->

<script type="text/javascript" src="dragdrop.js"></script>

<!---Script for Form ContextMenu functionality -->
<script type="text/javascript">

......
</script>

<!-- content start -->

<div class="wrapper" id="MainDivWrapper" runat="server" onload="enabledragdrop();">

And in the js section beneath (same folder) this function...called on the div onload..  (originally from the Body onload)
does not fire the alert...

Weird? or am I missing something here? (probably the latter!)
Thx
Neal

function

enabledragdrop()

{

//this is to prevent errors when you start dragging items

//before the page is completely loaded

isDragDropEnabled =

true;

window.alert(

"enabled");

};

[Atanas Korchev]

Hello Neal,

Maybe the path to the JavaScript file is not correct. You can try using absolute url or use ResolveUrl like this:

<script type="text/javascript" src='<%= ResolveUrl("~/dragdrop.js")%>'></script>

I hope this helps,
Albert
the Telerik team

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

[Neal]

Thanks but no cigar, unfortunately.

The User Control just does not see the external js,..despite the src directive.

Guess I'll just paste the lot of it into the user control.

Thanks anyway
Neal