Right click context menu for a text field!

[Vithiya]

I need to pop up a context menu when the user right clicks in a text box. How can I make that happen? The reason I need to do this is to provide the user a mechanism how they can select pre-formated words to fill the text box.

Thanks!
vithiya

[Princy]

Hello Vithiya,

You can try the following code using which a ContextMenu will pop up on rightclicking the RadTextBox.
aspx:

<telerik:RadTextBox ID="RadTextBox1"  runat="server" onmousedown="showMenu(event);">
</telerik:RadTextBox >

js:

<script type="text/javascript" >
function showMenu(e)
        {
     alert(event.which);
       if(event.button==2)
       {

            var contextMenu = $find("<%= RadContextMenu1.ClientID %>");

            if ((!e.relatedTarget) || (!$telerik.isDescendantOrSelf(contextMenu.get_element(), e.relatedTarget)))
            {
                contextMenu.show(e);
            }

            $telerik.cancelRawEvent(e);

       }
       return false;
        }
</script >

Thanks
Princy.

[Vithiya]

Thanks for the sample code Princy. It works except the right click event for IE does not get cancelled. I get the context menu and on top of that I get the IE right click menu as well. How can I suppress that?

Thanks!
vithiya

[Missing User]

Hello Vithiya,


You can disable the browser context menu for an element in your DOM with the following JavaScript:


        <telerik:RadTextBox ID="RadTextBox1"  runat="server" oncontextmenu="return false;" onmousedown="return showMenu(event);">
        </telerik:RadTextBox >


Kind regards,
Plamen
the Telerik team

Check out Telerik Trainer, the state of the art learning tool for Telerik products.

[Vithiya]

Thanks Princy. But still no luck. I keep getting the IE right click menu no matter what. Here is what I have in my code. I do have this textbox wraped in an Ajax Panel. Does that cause any issues?

<

telerik:RadTextBox ID="txtMessage" Runat="server" Height="90px"

TextMode="MultiLine" Width="400px" AutoPostBack="True"

oncontextmenu="return false;" onmousedown="return ShowMenu(event);">

</telerik:RadTextBox>

function

ShowMenu(e, control)

{

if(e.button==2)

{

storeCaretPosition = document.selection.createRange();

controlcontext = control;

var contextMenu = $find("<%= mnuInsertKeyword.ClientID %>");

contextMenu.show(e);

$telerik.cancelRawEvent(e);

}

return false;

}

Thank you!
vithiya

[Missing User]

Hello Vithiya,


Attached, please find a small and running project showing the needed approach.



Kind regards,
Plamen
the Telerik team

Check out Telerik Trainer, the state of the art learning tool for Telerik products.

[Vithiya]

Thanks for your help. I had the exact same code in my project and it did not work as expected. The only difference was that I had the textbox inside an ajaxpanel. Anyway, I changed the code as below and that works.

<

telerik:RadTextBox ID="txtMessage" Runat="server" Height="90px"

TextMode="MultiLine" Width="400px" AutoPostBack="True"

oncontextmenu="return ShowMenu(this);" >

</telerik:RadTextBox>

function

ShowMenu(control)

{

storeCaretPosition = document.selection.createRange();

controlcontext = control;

var contextMenu = $find("<%= mnuInsertKeyword.ClientID %>");

contextMenu.show(event);

return false;

}

Thank you!
Vithiya