Open context menu in grid on button click

11 posts, 1 answers
  1. Dave Miller
    Dave Miller avatar
    64 posts
    Member since:
    Oct 2004

    Posted 19 Nov 2009 Link to this post

    Is it possible to open a context menu, fire the OnRowContextMenu event, in a grid using a button click in a row?

    What I need is the same functionality as right clicking on a row like the demo at http://demos.telerik.com/aspnet-ajax/controls/examples/integration/gridandmenu/defaultcs.aspx?product=menu when you click the button in a row.

    Thanks,
    Dave
  2. Answer
    Shinu
    Shinu avatar
    17764 posts
    Member since:
    Mar 2007

    Posted 19 Nov 2009 Link to this post

    Hi Dave,

    Here is the code that I tried to show RadContextMenu on clicking a button.

    aspx:
     
        <telerik:GridTemplateColumn> 
            <ItemTemplate> 
                <asp:Button ID="Button1" runat="server" Text="Button" OnClientClick="showMenu(event);" /> 
            </ItemTemplate> 
        </telerik:GridTemplateColumn> 

    javascript:
     
    <script type="text/javascript"
    function showMenu(e) 
        var menu = $find("<%=RadMenu1.ClientID %>"); 
        menu.show(e);  
    </script> 
    You can find out important client side methods of RadContextMenu in the following documentation.
    RadMenu and RadContextMenu objects

    -Shinu.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Dave Miller
    Dave Miller avatar
    64 posts
    Member since:
    Oct 2004

    Posted 22 Nov 2009 Link to this post

    Shinu,

    Thanks for the response. This does show the context menu but what I basically needed is to fire the RadGrid "OnRowContextMenu" event for the row the button is in.

    This way the context menu would be wired to the correct row of the grid.

    Using your example did get me started and if this helps anyone else, this is how I got it to work.

    Using the hidden field as in the example at http://demos.telerik.com/aspnet-ajax/controls/examples/integration/gridandmenu/defaultcs.aspx?product=menu 

    I got the row index in the OnItemDatabound Event and assisned the OnClientClick event to the button using.

    protected void RadGrid1_ItemDataBound(object sender, GridItemEventArgs e)  
            {  
                if ((e.Item.ItemType == GridItemType.Item) || (e.Item.ItemType == GridItemType.AlternatingItem))  
                {  
                    ImageButton _btnEdit = (ImageButton)e.Item.FindControl("btnEdit");
                   _btnEdit.OnClientClick = "showMenu(event, " + e.Item.ItemIndex.ToString() + ")" ;  
                }  
     
            } 

    And modified the showMenu function to:

    function showMenu(e, row)    
    {    
        document.getElementById("curRowID").value = row;  
        var menu = $find("<%=RadMenu1.ClientID %>");    
        menu.show(e);     

    Thanks again,
    Dave
  5. Shubh
    Shubh avatar
    12 posts
    Member since:
    Jul 2010

    Posted 23 Jul 2010 Link to this post

    Hi,
    Could anybody tell me how to give a Confirm box on click of delete from the context menu? with reference to http://demos.telerik.com/aspnet-ajax/controls/examples/integration/gridandmenu/defaultcs.aspx?product=grid 
  6. Dave Miller
    Dave Miller avatar
    64 posts
    Member since:
    Oct 2004

    Posted 23 Jul 2010 Link to this post

    Shubh,

     

    Use the OnClientItemClicking event.

    Try this

    // --- Javascript
      
    function onClientClicking(sender, eventArgs) 
     {
        var item = eventArgs.get_item().get_text();
        if(item == "Delete")
        {
        var proceed = confirm("Delete this Record?"); 
        if (!proceed) 
        {
            eventArgs.set_cancel(true); 
            sender.hide();
        }
        }
     }
      
    // ---
      
    <telerik:RadContextMenu ID="RadMenu1" runat="server" Skin="Default" OnItemClick="RadMenu1_ItemClick" OnClientItemClicking="onClientClicking">
        <Items>
            <telerik:RadMenuItem Text="Delete"  />
        </Items>
    </telerik:RadContextMenu>


    Regards,
    Dave
  7. Shubh
    Shubh avatar
    12 posts
    Member since:
    Jul 2010

    Posted 29 Jul 2010 Link to this post

    Hi Dave,
    Thanks for the reply but I am getting the following javascript error after incorporating your javascript method:
    Microsoft JScript runtime error: Object doesn't support this property or method for the linevar item = eventArgs.get_item().get_text();
    Please suggest how this can be corrected.
  8. Shubh
    Shubh avatar
    12 posts
    Member since:
    Jul 2010

    Posted 02 Aug 2010 Link to this post

    Ok This I got resolved by using

    eventArgs.Item.Text instead of the method.
    But now I want to highlight the row of the grid which is to be deleted.could anybody help me in this?

  9. Shubh
    Shubh avatar
    12 posts
    Member since:
    Jul 2010

    Posted 06 Aug 2010 Link to this post

    Any help for the above query?
  10. Markus
    Markus avatar
    4 posts
    Member since:
    Jan 2012

    Posted 13 Feb 2012 Link to this post

    I have the same problem.
    I have ImageButtons in every gridrow, when clicked there comes a RadContextMenu to set some values in the specific row .
    I need to select the row by clicking the ImageButton on the client site!
    The Javascript-Method:

    eventArgs.get_itemIndexHierarchical()

    throws an Exception(Null or not defined) because i click the Imagebutton and not the column

    Here is the part of the Code:
    ImageButton:
    <telerik:GridTemplateColumn FilterControlAltText="Filter DefaultAction column" UniqueName="DefaultAction"
    <ItemStyle VerticalAlign="Middle" HorizontalAlign="Right" /> 
    <ItemTemplate
    <asp:ImageButton id="imgOptions" alt ="" OnClientClick="showMenu(event)" runat="server" ImageUrl="~/Graphic/Button/CLIXS_Vorgang_Optionen_BtnUp.png" width="50" height="50" onkeydown="Down" style="z-index:200; border-style:none;"/></td></tr>  
    </ItemTemplate
    </telerik:GridTemplateColumn
    </MasterTableView
    <ClientSettings
    <Selecting AllowRowSelect="true" />

    RadContextMenu:

    <telerik:RadContextMenu ID="WorkBoxContextMenu" EnableRoundedCorners="true" EnableShadows="true" Skin="Default" OnItemClick="ProcessOptionBtnClick" runat="server" CssClass="RadMenu"
    <Items
    <Telerik:RadMenuItem Text="Vorgang starten" Value="VS" ImageUrl="~/Graphic/Icon/CLIXS_Icon_Starten_48.png" runat="server" /> 
    <Telerik:RadMenuItem Text="Vorgang stornieren" Value="VB" ImageUrl="~/Graphic/Icon/CLIXS_Icon_Cancel_48.png" runat="server" /> 
    <Telerik:RadMenuItem Text="Störung anmelden" Value="ST" ImageUrl="~/Graphic/Icon/CLIXS_Icon_Blitz.png" runat="server" /> 
    <Telerik:RadMenuItem Text="Auftrag anhalten" Value="QS" ImageUrl="~/Graphic/Icon/CLIXS_Icon_Pause_48.png" runat="server" Height="48" BorderStyle="Solid"/> 
    <Telerik:RadMenuItem Text="Auftrag umleiten" Value="TC" ImageUrl="~/Graphic/Icon/CLIXS_Icon_Tauschen.png" runat="server" /> 
    <Telerik:RadMenuItem Text="Blaulicht setzen" Value="BL" ImageUrl="~/Graphic/Icon/CLIXS_Icon_Blaulicht.png" runat="server" /> 
    </Items
    </telerik:RadContextMenu

    ScriptCode:

    function showMenu(eventArgs) { 
         var contextMenu = window.$find("<%= WorkBoxContextMenu.ClientID %>");
         var index = eventArgs.get_itemIndexHierarchical();
         document.getElementById("radGridClickedRowIndex").nodeValue = index;
         sender.get_masterTableView().selectItem(sender.get_masterTableView().get_dataItems()[index].get_element(), true);
         if ((!eventArgs.relatedTarget) || (!window.$telerik.isDescendantOrSelf(contextMenu.get_element(), eventArgs.relatedTarget))) {
                         contextMenu.show(eventArgs);
         }
      
         window.$telerik.cancelRawEvent(eventArgs);
    }

     

    I hope someone can help me

    Greetings
    Markus

  11. Tsvetina
    Admin
    Tsvetina avatar
    1874 posts

    Posted 16 Feb 2012 Link to this post

    Hi Markus,

    You cannot use a property of the eventArgs of a grid event inside a regular click event from the form. However, you can manually access the grid row on clicking an element inside it, as shown below (it would be identical with the ImageButton):
    <telerik:GridTemplateColumn>
        <ItemTemplate>
            <img onclick="showMenuOnLeftClick(this,event)" src="../menu.gif" alt="context menu" />
        </ItemTemplate>
    </telerik:GridTemplateColumn>

    function showMenuOnLeftClick(sender, event) {
      
                   var node = sender.parentNode;
                   while (node.className != "rgRow" && node.className != "rgAltRow") {
                       node = node.parentNode;
                   }
                   var masterTable = $find('<%=RadGrid1.ClientID %>').get_masterTableView();
                   var selectedRow = masterTable.get_dataItems()[node.sectionRowIndex];
                   var menu = $find('<%=RadContextMenu1.ClientID %>');
                   menu.show(event);
               }

    Try this out and let us know how it works for you.

    All the best,
    Tsvetina
    the Telerik team
    Sharpen your .NET Ninja skills! Attend Q1 webinar week and get a chance to win a license! Book your seat now >>
  12. Markus
    Markus avatar
    4 posts
    Member since:
    Jan 2012

    Posted 17 Feb 2012 Link to this post

    Hi Tsvetina,

    it's a design-target in my project to use an imagebutton to open the context-menu for each row.

    i have solved my problem by binding the onclick-command to each button in the gridrow in the ItemCreated-Event to transmit the row-index in code behind file.

    code-behind class:
    protected void RadWorkboxViewItemCreated(object sender, GridItemEventArgs e)
            {
                var gridDataItem = e.Item as GridDataItem;
                if (gridDataItem != null)
                {
                    var Item = (gridDataItem);
                    ImageButton optionsBtn = (ImageButton) Item.FindControl("imgOptions");
                    optionsBtn.Attributes.Add("onClick", string.Format("showMenu(this, event, '{0}', '{1}', {2})", WorkBoxContextMenu.ClientID, RadWorkboxView.ClientID, Item.ItemIndex));
                }
            }

    aspx-script:
    function showMenu(sender, eventArgs, menuClientId, gridClientId, rowIndex) {
    contextMenu = window.$find(menuClientId);
    var grid = window.$find(gridClientId);
    var tableView = grid.get_masterTableView();
    var dataItems = tableView.get_dataItems()[rowIndex];
    tableView.clearSelectedItems();
    tableView.selectItem(tableView.get_dataItems()[rowIndex].get_element(), true);
    contextMenu.show(eventArgs);
      
    eventArgs.cancelBubble = true;
    eventArgs.returnValue = false;
      
    if (eventArgs.stopPropagation) {
    eventArgs.stopPropagation();
    eventArgs.preventDefault();
    }
    }

    Thanks
    Markus
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017