Open context menu in grid on button click

[Dave Miller]

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

[Shinu]

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.

[Dave Miller]

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

[Shubh]

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 

[Dave Miller]

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

[Shubh]

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.

[Shubh]

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?

[Shubh]

Any help for the above query?

[Markus]

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

[Tsvetina]

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

[Markus]

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