This is a migrated thread and some comments may be shown as answers.

Context menu at left click of grid button

5 Answers 418 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Sulman
Top achievements
Rank 1
Sulman asked on 28 Nov 2011, 03:39 PM
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???

5 Answers, 1 is accepted

Sort by
0
Accepted
Princy
Top achievements
Rank 2
answered on 29 Nov 2011, 05:58 AM
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.
0
Sulman
Top achievements
Rank 1
answered on 01 Dec 2011, 02:01 PM
Thanks , its working now. :-)
0
john81
Top achievements
Rank 1
answered on 18 Sep 2012, 01:27 PM
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.

0
Princy
Top achievements
Rank 2
answered on 19 Sep 2012, 04:43 AM
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.
0
john81
Top achievements
Rank 1
answered on 19 Sep 2012, 01:08 PM
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!!!
Tags
Grid
Asked by
Sulman
Top achievements
Rank 1
Answers by
Princy
Top achievements
Rank 2
Sulman
Top achievements
Rank 1
john81
Top achievements
Rank 1
Share this question
or