Context menu at left click of grid button

[Sulman]

Hi,

I am looking for help to display context menu at my grid button (left mouse click). I have created a grid and added a GridButtonColumn as below

<

telerik:GridButtonColumn ImageUrl="../img/gearsbluebtn.png" ButtonCssClass="selectbtn" ButtonType="ImageButton" CommandName="Select" CommandArgument="event" HeaderText="Select" UniqueName="Select" >

 

Then i have added following java script codes to display context menu at grid button click. This java script codes are being called at OnRowContextMenu="RowContextMenu" . Context menu is being displayed but on right mouse click at grid button. i want to display it at left mouse click . If i call context menu at any other event then eventArgs.get_domEvent(); is not available to display grid.

 

 function RowContextMenu(sender, eventArgs) {

var menu = $find("<%=RadMenu1.ClientID %>");

 var evt = eventArgs.get_domEvent();

 

if (evt.target.tagName == "INPUT" || evt.target.tagName == "A") {

 menu.show(evt);

evt.cancelBubble = true;

 evt.returnValue = false;

  

if (evt.stopPropagation) {

 evt.stopPropagation();

evt.preventDefault();

}

}

}

Any one please help???

[Princy]

Hello,

You can try the following code snippet.
CS:

protected void grid1_ItemCreated(object sender, Telerik.Web.UI.GridItemEventArgs e)
  {
    if (e.Item is GridDataItem)
    {
       foreach (GridColumn col in grid1.Columns)
        {
           GridDataItem headerItem = (GridDataItem)e.Item;
            ImageButton btn = (ImageButton)headerItem["Select"].Controls[0];
            btn.OnClientClick = "showMenu(this, event); return false;";
        }
     }
  }

JS:

function showMenu(sender, args)
 {
   var contextMenu = $find("<%= RadMenu1.ClientID %>");
   contextMenu.show(args);
 }

Thanks,
Princy.

[Sulman]

Thanks , its working now. :-)

[john81]

This works for showing the context menu on left click but how exactly do you get the index or datekey value for the row you clicked on?  If you click on the row to select it first, no problem because you can use RowSelecting to save the data key value.

var dataKeyValue = args.getDataKeyValue("ID");

But if you click on the button it doesn't select the row.  So I either need to know how to get the datakey value for the row on the button click on how to force a row selection on the button click.

[Princy]

Hi,

You can pass the DataKeyNames in onclick event of button as shown below.
C#:

protected void RadGrid1_ItemDataBound(object sender, Telerik.Web.UI.GridItemEventArgs e)
{
 if (e.Item is GridDataItem)
 {
   GridDataItem item = (GridDataItem)e.Item;
   ImageButton btn = (ImageButton)item["UniqueName"].Controls[0];
   string value = item.GetDataKeyValue("ID").ToString();
   btn.Attributes.Add("onclick", "onSelect('" + value + "');");
 }
}

JS:

function onSelect(value)
{

alert(value);

}

Thanks,
Princy.

[john81]

Worked great!  So I was able to add in ID as a parameter in OnItemDataBound for the RadGrid along with the send and events to have a complete solution.

string strID = ((DataRowView)e.Item.DataItem)["ID"].ToString().Trim();
var btn = (Button)dataItem["Select"].Controls[0];
btn.Attributes.Add("onclick", "showContextMenu(this, event, " + ID + "); return false;");

Then just add a parameter for the id to the javascript and save that id to a hidden variable that can be used in the Context Menu's OnItemClick on server side.

function showContextMenu(sender, args, id) { 
document.getElementById("radGridClickedRowDataKey").value = id;
var contextMenu = $find("<%= radCtxMenuActions.ClientID %>");
contextMenu.show(args);
}      

Thanks!!!