RadContextMenu

[Zeke Sheppard]

Looking for an example binding a RadContextMenu to an asp:GridView that allows context menu to be displayed on right mouse click of selected row.

Any leads?

[Veronica]

Hello Zeke Sheppard,

Please take a look at this demo on AJAX-enabled context menu.

Feel free to ask me if you have further questions.

reetings,
Veronica Milcheva
the Telerik team

[Zeke Sheppard]

To quote:

Looking for an example binding a RadContextMenu to an asp:GridView that allows context menu to be displayed on right mouse click of selected row.

Any leads?

The sample shown uses a RadGrid not an asp:GridView and does not appear to be applicable to the intrinsic GridView. Per the original request, would it be possible to get a lead to a sample showing a RadContextMenu with the asp:GridView control?

[Zeke Sheppard]

Any progress?

[Veronica]

Hello Zeke Sheppard,

The ASP.NET GridView has no client-side API and no context menu support.

Could you please explain in more detail what items do you want to have in the context menu? Also why do you prefer GridView instead of RadGrid?

Kind regards,
Veronica Milcheva
the Telerik team

[Zeke Sheppard]

Items to be added to context menu....

 

<telerik:RadContextMenu ID="rcmContextMenu" iscontext="True" runat="server" Skin="Outlook"

 

 

OnItemClick="rcmContextMenu_ItemClick" contextmenuelementid="none">

 

 

<Items>

 

 

<telerik:RadMenuItem Text="Edit" />

 

 

<telerik:RadMenuItem Text="Delete" />

 

 

</Items>

 

 

</telerik:RadContextMenu>

I am modifying existing code to add a context menu and am trying to minimize the scope of changes. This is the only place where a context menu is required so I would prefer to keep this grid consistent with the other grids (all utilizing the asp:GridView control) in the application.

 

[Zeke Sheppard]

For a RadGrid with the following settings;

 

<ClientSettings EnablePostBackOnRowClick="true">

 

 

<Selecting AllowRowSelect="True" />

 

 

</ClientSettings>

 

And a RadContextMenu is configured as shown;

<

 

telerik:RadContextMenu ID="rcmContextMenu" iscontext="True" runat="server" Skin="Outlook"

 

 

OnItemClick="rcmContextMenu_ItemClick" contextmenuelementid="none">

 

 

<Items>

 

 

<telerik:RadMenuItem Text="Edit" />

 

 

 

<telerik:RadMenuItem Text="Delete" />
</

 

Items>

 

</

 

telerik:RadContextMenu>

 

The following occurs when a RadContextMenu is used on the RadGrid;

1) Right click on selected grid row.
2) Context menu appears as expected
3) An item is selected off of the context menu
4) RadGrid_SelectedIndexChanged event is fired
5) RadContextMenu_ItemClick event is fired

How is it possible to use a RadContextMenu when RadGrid_SelectedIndexChanged fires when an item is selected off of the context menu before RadContextMenu_ItemClick fires?

[Veronica]

Hello Zeke Sheppard,

As you have allowed the row selection:

<Selecting AllowRowSelect="true" />

it is normal that OnSelectedIndexChanged is fired no matter if you make a left or right click.

Could you please explain in more details what you have in the SelectedIndexChanged handler that may cause problems when selecting a context menu item?

Best Regards,
Veronica Milcheva
the Telerik team

[Zeke Sheppard]

It is not pertinent what is happening in the selected index change, that event should not be firing at all since the click is on the context menu when this occurs, not on the grid row.

How can the selected index changed event for the grid be prevented when an item is clicked on a context menu item?

[Veronica]

Hello Zeke,

We already answered to your colleague Creigh about the ContextMenu for RadGrid. I am forwarding the message from Veli Pehlivanov:

"You are getting RadGrid's server-side SelectedIndexChanged event fire, because a right click on a grid row selects the row. So, you are showing the context menu on right click, but the item you are showing the context menu for is also selected. When the page postbacks, any changes to the selected items that have been made on the client cause RadGrid to fire the SelectedIndexChanged event.

If you need to prevent item selection on right click, you can use 2 RadGrid client events:

1. Use OnRowClick to raise a flag indicating a row can be successfully selected. The OnRowClick client event is fired for left mouse button clicks only.

2. Use OnRowSelecting to cancel  the selection of the current clicked item if no flag has been raised.

The combination of the above 2 events ensures that a right mouse button click does not select a grid item, it only shows the context menu. Attaching the modified test page."

All the best,
Veronica Milcheva
the Telerik team

[Zeke Sheppard]

 

As delivered, the sample code does not work.  The rowSelecting event fires before RowClick, so _canSelect is set to true after the check has been made in rowSelecting. This causes the row selection to be denied. It never allows a row to be selected with either mouse click.

 

Additionally, the Context menu is designed to be driven off of the data in the grid, for a given row.

 

Here’s the issue: why doesn’t the RadGrid_SelectedIndexChanged event fire when the row is selected, not when the context menu item is clicked?  To quote your response…’ You are getting RadGrid's server-side SelectedIndexChanged event fire, because a right click on a grid row selects the row.’ This does not appear to be true. The event is firing when the context menu item is clicked, not the grid row.

[Veli]

Hi Zeke,

I have replied to the ticket thread on the same topic. For the sake of clarity, let's continue this conversation in the ticket.

Veli
the Telerik team

[Zeke Sheppard]

Since I have to go through a proxy to append the other ticket, this would be a better place.

Questions: since the grid can obviously discern between left and right mouse clicks, how can we detect that in the selected Index changed handler for the RadGrid?

[Veli]

Hello Zeke,

You cannot, actually. RadGrid cannot, by default, discern between left and right mouse clicks. The fact is, the MS AJAX framework does not fire click events for right mouse clicks. To verify, you can use the following test page:

<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>

<div id="div1" style="width:100px; height:100px; border:1px solid green">
</div>

<script type="text/javascript">
    function pageLoad(sender, args)
    {
        var div1 = $get("div1");
        $addHandler(div1, "click", function ()
        {
            alert("click1!");
        });
    }
</script>

Clicking on div1 with the left mouse button alerts "click!", but clicking with the right mouse button does not! Thus, RadGrid's RowClick event fires for left mouse clicks only. But item selection is triggered on mousedown, meaning you get item selection for both left and right mouse clicks. In effect, you do not have information about the clicked mouse button on item selection. Neither on the client nor on the server.

To work around this limitation, we need to use 2 different approaches:

1. For non-IE browsers, we need to raise a flag in OnRowClick, indicating a left mouse button click. Then we use OnRowSelecting to check this flag. This is how we know if left or right mouse button is clicked.

2. Approach 1 cannot be used in IE, because OnRowClick fires after OnRowSelecting. For IE, we need to check window.event.type. Its value is "click" for left mouse button click and "contextmenu" for right mouse button click. So, to disable item selection on right click, you have the following script:

function rowSelecting(sender, args)
{
    if (!sender._canSelect &&
        (!window.event ||
        (window.event && window.event.type === "contextmenu"))) {
        //alert('rowSelecting');
        sender._canSelect = false;
        args.set_cancel(true);
    }
}

function rowClick(sender, args) {
    //alert('rowClick');
    sender._canSelect = true;
}

rowSelecting and rowClick are attached to the client grid events:

<ClientSettings>
    <ClientEvents OnRowClick="rowClick" OnRowSelecting="rowSelecting" />
</ClientSettings>

Greetings,
Veli
the Telerik team