Create your own specific row context menu on WebGrid

Sometimes users don’t want to use default row context on WebGrid.NET. Some of them prefer to have their own row context menu on WebGrid. This article will show you how to integrate your own WebContextMenu from WebDesktop.NET into WebGrid.NET.

First, you need to create your own WebContextMenu. In this sample I created two WebContextMenu’s named WBContextMenuSR (for Sales Representative) and WBContextMenuSM (for Sales Manager).


Screenshot of WBContextMenuSR (for Sales Representative)


Screenshot of WBContextMenuSM (for Sales Manager)

In this scenario, you need to use OnRowContextMenu client side event in order to show your default context menu and don’t forget to set return false; in order to prevent WebGrid’s default context menu displayed. Here is the sample codes:

var x;
var y;
function show_coords(event)
{
	if(IS.ie)
	{
		x=event.screenX;
		y=event.screenY;
	}
	else if(IS.moz)
	{
		x = event.clientX + document.body.scrollLeft + document.documentElement.scrollLeft;
		y = event.clientY + document.body.scrollTop + document.documentElement.scrollTop;
	}
}

function WebGrid1_OnRowContextMenu(controlId, rowType, rowElement, menuObject)
{
	if(rowElement.cells[6].innerText=="Sales Representative")
	{
		var cm2 = ISGetObject("WBContextMenuSR");
		cm2.Show(x,y);
	}
	else if(rowElement.cells[6].innerText=="Sales Manager")
	{
		var cm1 = ISGetObject("WBContextMenuSM");
		cm1.Show(x,y);
	}
	return false;
}

For more detail information, you can download the sample here. Hope this helps. Please feel free to put your comment..:)

Advertisements

One thought on “Create your own specific row context menu on WebGrid

  1. Chris

    Hello,
    I have a question about custom contextmenu in UXGridView in WPF project.
    How can I use my own contextmenu i UXGridView?
    I created contextmenu put in UXGridView by Intersoft:ContextMenuService.ContextMenu=”{Binding ElementName=ContextMenu1}”
    but its not working.

    Best Regards
    Chris Mietka

    Reply

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s