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

7 posts, 1 answers
  1. Neal
    Neal avatar
    114 posts
    Member since:
    Apr 2008

    Posted 29 May 2008 Link to this post

    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...

  2. Atanas Korchev
    Admin
    Atanas Korchev avatar
    8462 posts

    Posted 29 May 2008 Link to this post

    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
  3. Neal
    Neal avatar
    114 posts
    Member since:
    Apr 2008

    Posted 30 May 2008 Link to this post

    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

  4. Atanas Korchev
    Admin
    Atanas Korchev avatar
    8462 posts

    Posted 30 May 2008 Link to this post

    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
  5. Neal
    Neal avatar
    114 posts
    Member since:
    Apr 2008

    Posted 30 May 2008 Link to this post

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

    };


  6. Answer
    Atanas Korchev
    Admin
    Atanas Korchev avatar
    8462 posts

    Posted 30 May 2008 Link to this post

    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
  7. Neal
    Neal avatar
    114 posts
    Member since:
    Apr 2008

    Posted 30 May 2008 Link to this post

    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
Back to Top