Reshowing radmenu after postback

[Robert Koska]

I have the following situation:

I have a radmenu being used as a context menu on a radtreeview.  When the user clicks (or right clicks) on a node in the treeview, the node is then selected and I need to retrieve some data from the database to populate some textboxes with data relevent to the newly selected node.

The problem I am having is that, of course, when the page is posted back, my context menu is then closed.  I am trying to use the menu.show command, but it wants a dom event as a parameter. In other places I've just used the args.get_DomEvent to grab the event off of the event arguments parameters that are sent to the method.  But, I don't have an "event arguments" parameter if I'm trying to just register a script to open the menu as soon as the page gets done loading.

how can I reshow my menu after the page refreshes following a postback?

[Peter]

Hi Robert,

You can try a solution using cookies:

<script type="text/javascript">
       function showMenu(e) {
           var contextMenu = $find("<%= RadContextMenu1.ClientID %>");

           contextMenu.show(e);
           $telerik.cancelRawEvent(e);
       }
       function showMenuAt(x,y) {
           var contextMenu = $find("<%= RadContextMenu1.ClientID %>");
           if (isNaN(x) || isNaN(y)) {
               alert("Please provide valid integer coordinates");
               return;
           }
           contextMenu.showAt(x,y);
       }

       function OnClientContextMenuShowing(sender, eventArgs) {
            showMenu(eventArgs.get_domEvent());
       }
       function OnClientShowing(sender, eventArgs) {
           if (readCookie("x") == null) {
               var x = eventArgs.get_domEvent().clientX;
               var y = eventArgs.get_domEvent().clientY;
               createCookie("x", x, 1);
               createCookie("y", y, 1);
           }
       }
       function pageLoad() {
           if (readCookie("x") != null) {
               showMenuAt(readCookie("x"), readCookie("y"));
           }
           eraseCookie("x");
       }
       function createCookie(name, value, days) {
           if (days) {
               var date = new Date();
               date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000));
               var expires = "; expires=" + date.toGMTString();
           }
           else var expires = "";
           document.cookie = name + "=" + value + expires + "; path=/";
       }
       function readCookie(name) {
           var nameEQ = name + "=";
           var ca = document.cookie.split(';');
           for (var i = 0; i < ca.length; i++) {
               var c = ca[i];
               while (c.charAt(0) == ' ') c = c.substring(1, c.length);
               if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length, c.length);
           }
           return null;
       }
       function eraseCookie(name) {
           createCookie(name, "", -1);
       }
   </script>
   <telerik:RadTreeView ID="RadTreeView1" runat="server" OnClientContextMenuShowing="OnClientContextMenuShowing">
       <Nodes>
           <telerik:RadTreeNode runat="server" Text="Root RadTreeNode1">
               <Nodes>
                   <telerik:RadTreeNode runat="server" Text="Child RadTreeNode 1">
                   </telerik:RadTreeNode>
                   <telerik:RadTreeNode runat="server" Text="Child RadTreeNode 2">
                       <Nodes>
                           <telerik:RadTreeNode runat="server" Text="Child RadTreeNode 1">
                           </telerik:RadTreeNode>
                           <telerik:RadTreeNode runat="server" Text="Child RadTreeNode 2">
                           </telerik:RadTreeNode>
                       </Nodes>
                   </telerik:RadTreeNode>
               </Nodes>
           </telerik:RadTreeNode>
           <telerik:RadTreeNode runat="server" Text="Root RadTreeNode2">
               <Nodes>
                   <telerik:RadTreeNode runat="server" Text="Child RadTreeNode 1">
                   </telerik:RadTreeNode>
                   <telerik:RadTreeNode runat="server" Text="Child RadTreeNode 2">
                   </telerik:RadTreeNode>
               </Nodes>
           </telerik:RadTreeNode>
           <telerik:RadTreeNode runat="server" Text="Root RadTreeNode3">
               <Nodes>
                   <telerik:RadTreeNode runat="server" Text="Child RadTreeNode 1">
                   </telerik:RadTreeNode>
                   <telerik:RadTreeNode runat="server" Text="Child RadTreeNode 2">
                   </telerik:RadTreeNode>
               </Nodes>
           </telerik:RadTreeNode>
       </Nodes>
   </telerik:RadTreeView>
   <telerik:RadContextMenu ID="RadContextMenu1" OnItemClick="RadContextMenu1_ItemClick" runat="server" OnClientShowing="OnClientShowing">
       <Items>
           <telerik:RadMenuItem runat="server" Text="Root RadMenuItem1">
               <Items>
                   <telerik:RadMenuItem runat="server" Text="Child RadMenuItem 1">
                   </telerik:RadMenuItem>
                   <telerik:RadMenuItem runat="server" Text="Child RadMenuItem 2">
                   </telerik:RadMenuItem>
               </Items>
           </telerik:RadMenuItem>
           <telerik:RadMenuItem runat="server" Text="Root RadMenuItem2">
               <Items>
                   <telerik:RadMenuItem runat="server" Text="Child RadMenuItem 1">
                   </telerik:RadMenuItem>
                   <telerik:RadMenuItem runat="server" Text="Child RadMenuItem 2">
                   </telerik:RadMenuItem>
               </Items>
           </telerik:RadMenuItem>
           <telerik:RadMenuItem runat="server" Text="Root RadMenuItem3">
               <Items>
                   <telerik:RadMenuItem runat="server" Text="Child RadMenuItem 1">
                   </telerik:RadMenuItem>
                   <telerik:RadMenuItem runat="server" Text="Child RadMenuItem 2">
                   </telerik:RadMenuItem>
               </Items>
           </telerik:RadMenuItem>
       </Items>
   </telerik:RadContextMenu>

Best wishes,
Peter
the Telerik team

[Tonino]

Hi Peter!

I had a similar problem (load different menu items depending on where in the grid the user clicked) as Robert and with the help of your post I managed to solve it! Thanks!

Here a small change I made to createCookie to get rid of the warning about 'expires' beeing present twice in Visual Studio.

function createCookie(name, value, days) {
   var expires = "";
   if (days) {
      var date = new Date();
      date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000));
      expires = "; expires=" + date.toGMTString();
   }
   document.cookie = name + "=" + value + expires + "; path=/";
}

Regards,
Tonino.

[Peter]

Hi Tonino,

I am glad my post was helpful and thank you for sharing your findings with us.

All the best,
Peter
the Telerik team

[Tonino]

Hello Peter!

I hava a RadAjaxPanel containing a RadGrid. On each row of the grid there is a button and pressing the button causes to show a menu (depending on the row.)

Showing the menu after loading the data in code behind works as expected when using the code you provided.

The only thing I can't find out how to fix: when pressing the button the page goes white and then the grid reappears with the menu. Is this happening because the button is not ajaxified?

Regards,
Tonino.

[Simon]

Hi Tonino,

What do you mean by the page going white? Is there a postback causing the page to reload when you click on the Button? Have you tried putting the Button inside the AjaxPanel to see if this makes any difference?

Kind regards,
Simon
the Telerik team

[Tonino]

Hi Peter!

I found the problem! My LoadingPanel was set to 'White' without tranparency and therefore the page went white...

<telerik:RadAjaxLoadingPanel ID="LP" runat="server" BackColor="White" Direction="LeftToRight"
            HorizontalAlign="Center" InitialDelayTime="10" MinDisplayTime="500">

Regards,
Tonino.