Standard browser context menu

[QualiWareUA]

Hello,

I have a grid control with context menu attached to the rows. When some item is being edited in place, I cannot use mouse right-click to access standard browser context menu to paste some data to a text box. The same is with filter text box. Is there a way to show standard context menu when click is made over some input control?

[Sebastian]

Hi Vladimir,

To restrict the context menu from being shown over input/link element, add the following code snippet to the OnRowContextMenu client event handler of RadGrid (bolded):

            <script type="text/javascript">
            function RowContextMenu(sender, eventArgs)
            {
                var menu = $find("<%=RadMenu1.ClientID %>");
                var evt = eventArgs.get_domEvent();

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

                var index = eventArgs.get_itemIndexHierarchical();
                document.getElementById("radGridClickedRowIndex").value = index;

                sender.get_masterTableView().selectItem(sender.get_masterTableView().get_dataItems()[index].get_element(), true);

                menu.show(evt);

                evt.cancelBubble = true;
                evt.returnValue = false;

                if (evt.stopPropagation)
                {
                   evt.stopPropagation();
                   evt.preventDefault();
                }
            }
            </script>

We will update the relevant integration demo of our controls for the next version of the QSF to reflect this change as well. Thank you for drawing our attention to this detail.

Greetings,
Stephen
the Telerik team

Instantly find answers to your questions at the new Telerik Support Center

[QualiWareUA]

Hello Stephen,

Does not seem to work...

[Sebastian]

Hi Vladimir,

I tested the an updated version of the online demo locally and everything seems to behave as expected. Here is the entire source code of my test page:

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

<telerik:RadScriptBlock runat="server" ID="RadScriptBlock1">

<script type="text/javascript">

function RowContextMenu(sender, eventArgs)

{

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

var evt = eventArgs.get_domEvent();

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

{

return;

}

var index = eventArgs.get_itemIndexHierarchical();

document.getElementById("radGridClickedRowIndex").value = index;

sender.get_masterTableView().selectItem(sender.get_masterTableView().get_dataItems()[index].get_element(), true);

menu.show(evt);

evt.cancelBubble = true;

evt.returnValue = false;

if (evt.stopPropagation)

{

evt.stopPropagation();

evt.preventDefault();

}

}

</script>

</telerik:RadScriptBlock>

<telerik:RadAjaxManager ID="RadAjaxManager1" runat="server">

<AjaxSettings>

<telerik:AjaxSetting AjaxControlID="RadGrid1">

<UpdatedControls>

<telerik:AjaxUpdatedControl ControlID="RadGrid1" LoadingPanelID="AjaxLoadingPanel1" />

<telerik:AjaxUpdatedControl ControlID="RadMenu1" />

</UpdatedControls>

</telerik:AjaxSetting>

<telerik:AjaxSetting AjaxControlID="RadMenu1">

<UpdatedControls>

<telerik:AjaxUpdatedControl ControlID="RadGrid1" LoadingPanelID="AjaxLoadingPanel1" />

<telerik:AjaxUpdatedControl ControlID="RadMenu1" />

</UpdatedControls>

</telerik:AjaxSetting>

</AjaxSettings>

</telerik:RadAjaxManager>

<telerik:RadAjaxLoadingPanel ID="AjaxLoadingPanel1" runat="server" Height="75px"

Width="75px" Transparency="25">

<img alt="Loading..." src='<%= RadAjaxLoadingPanel.GetWebResourceUrl(Page, "Telerik.Web.UI.Skins.Default.Ajax.loading.gif") %>'

style="border: 0;" />

</telerik:RadAjaxLoadingPanel>

<input type="hidden" id="radGridClickedRowIndex" name="radGridClickedRowIndex" />

<p>

Right-click the grid to open context menu.</p>

<div style="margin-right: 20px;">

<telerik:RadGrid ID="RadGrid1" runat="server" Width="100%"

DataSourceID="SessionDataSource1" AllowAutomaticDeletes="true" AllowAutomaticInserts="true"

AllowAutomaticUpdates="true" Skin="Vista" OnPreRender="RadGrid1_PreRender">

<MasterTableView AllowSorting="False" PageSize="10" AllowPaging="True" Width="100%"

DataKeyNames="ProductID" DataSourceID="SessionDataSource1" EditMode="InPlace">

<Columns>

<telerik:GridEditCommandColumn UniqueName="EditCommandColumn" Visible="false" />

</Columns>

</MasterTableView>

<ClientSettings>

<ClientEvents OnRowContextMenu="RowContextMenu"></ClientEvents>

<Selecting AllowRowSelect="true" />

</ClientSettings>

<PagerStyle Mode="NextPrevAndNumeric" />

</telerik:RadGrid>

</div>

<br />

<sds:SessionDataSource ID="SessionDataSource1" runat="server" ConnectionString="<%$ ConnectionStrings:NorthwindConnectionString %>"

SelectCommand="SELECT ProductID, ProductName,QuantityPerUnit,UnitPrice, UnitsInStock FROM [Products]"

DeleteCommand="DELETE FROM [Products] WHERE [ProductID] = ?" InsertCommand="INSERT INTO Products(ProductName, SupplierID, CategoryID, QuantityPerUnit, UnitPrice, UnitsInStock, UnitsOnOrder, ReorderLevel, Discontinued) VALUES (?, ?, ?, ?, ?, ?, ?, ?, ?)"

UpdateCommand="UPDATE [Products] SET [ProductName] = ?,[QuantityPerUnit] = ?, [UnitPrice] = ?, [UnitsInStock] = ? WHERE [ProductID] = ? AND [ProductName] = ? AND [QuantityPerUnit] = ? AND [UnitPrice] = ? AND [UnitsInStock] = ?"

PrimaryKeyFields="ProductID" OldValuesParameterFormatString="original_{0}"

ConflictDetection="CompareAllValues">

<DeleteParameters>

<asp:Parameter Name="original_ProductID" Type="Int32" />

</DeleteParameters>

<UpdateParameters>

<asp:Parameter Name="ProductName" Type="String" />

<asp:Parameter Name="QuantityPerUnit" Type="String" />

<asp:Parameter Name="UnitPrice" Type="Decimal" />

<asp:Parameter Name="UnitsInStock" Type="Int16" />

<asp:Parameter Name="original_ProductID" Type="Int32" />

<asp:Parameter Name="original_ProductName" Type="String" />

<asp:Parameter Name="original_QuantityPerUnit" Type="String" />

<asp:Parameter Name="original_UnitPrice" Type="Decimal" />

<asp:Parameter Name="original_UnitsInStock" Type="Int16" />

</UpdateParameters>

<InsertParameters>

<asp:Parameter Name="ProductName" Type="String" />

<asp:Parameter Name="SupplierID" Type="Int32" />

<asp:Parameter Name="CategoryID" Type="Int32" />

<asp:Parameter Name="QuantityPerUnit" Type="String" />

<asp:Parameter Name="UnitPrice" Type="Decimal" />

<asp:Parameter Name="UnitsInStock" Type="Int16" />

<asp:Parameter Name="UnitsOnOrder" Type="Int16" />

<asp:Parameter Name="ReorderLevel" Type="Int16" />

<asp:Parameter Name="Discontinued" Type="Boolean" />

</InsertParameters>

</sds:SessionDataSource>

<telerik:RadContextMenu ID="RadMenu1" runat="server" Skin="Vista" OnItemClick="RadMenu1_ItemClick">

<Items>

<telerik:RadMenuItem Text="Add" />

<telerik:RadMenuItem Text="Edit" />

<telerik:RadMenuItem Text="Delete" />

</Items>

</telerik:RadContextMenu>

protected void RadGrid1_PreRender(object sender, EventArgs e)

{

if (RadGrid1.EditIndexes.Count > 0 || RadGrid1.MasterTableView.IsItemInserted)

{

GridColumn col1 = RadGrid1.MasterTableView.GetColumn("EditCommandColumn") as GridColumn;

col1.Visible = true;

}

else

{

GridColumn col2 = RadGrid1.MasterTableView.GetColumn("EditCommandColumn") as GridColumn;

col2.Visible = false;

}

}

protected void RadMenu1_ItemClick(object sender, RadMenuEventArgs e)

{

int radGridClickedRowIndex;

radGridClickedRowIndex = Convert.ToInt32(Request.Form["radGridClickedRowIndex"]);

switch (e.Item.Text)

{

case "Edit":

RadGrid1.Items[radGridClickedRowIndex].Edit = true;

RadGrid1.Rebind();

break;

case "Add":

RadGrid1.MasterTableView.IsItemInserted = true;

RadGrid1.Rebind();

break;

case "Delete":

RadGrid1.MasterTableView.PerformDelete(RadGrid1.Items[radGridClickedRowIndex]);

break;

}

}

Test the sample on your machine and let me know how it goes.

Regards,

Stephen,

the Telerik team

Instantly find answers to your questions at the new Telerik Support Center

[kahluavn]

Hi,

I have RadTreeViewContextMenu and in some specific case, there are no ContextMenu needed. However while all RadTreeViewContextMenus have been disabled,  the browser context menu appear.  Please tell me how I could get rid of the browser context menu?

Kind regards,
Hoang

[Mats]

Hi!

I have the same problem as QualiWareUA.
I have a grid with In-place editing. When I try to use the context menu in a control of type INPUT then OnRowContextMenu is called instead of the default context menu. When returning without doing anything in OnRowContextMenu (as suggested by Sebastian) then no context menu at all is showing.
Does anyone know how to get the default context menu for an INPUT in my case?

Thanks
/Mats

[Mats]

Solved it!

The trick was to call args.set_cancel(true) before returning.

if (args.get_domEvent().target.tagName == 'INPUT')
{
        args.set_cancel(true);
        return false;
}

/Mats

[Sebastian]

Hi Mats,

If you want to display the standard browser context menu when right-clicking input elements in the grid, you will need to do that inside the following conditional block:

if(evt.target.tagName == "INPUT" || evt.target.tagName == "A")
 {
   //display the default browser context menu here
 }

This stackoverflow thread can help you further with the implementation.

Regards,
Sebastian
the Telerik team