
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
10 Answers, 1 is accepted

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> |
RadMenu and RadContextMenu objects
-Shinu.

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

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

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

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 line
var item = eventArgs.get_item().get_text();
Please suggest how this can be corrected.

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?


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

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