Right click context menu for a text field!

7 posts, 0 answers
  1. Vithiya
    Vithiya avatar
    41 posts
    Member since:
    May 2008

    Posted 19 Aug 2008 Link to this post

    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
  2. Princy
    Princy avatar
    17421 posts
    Member since:
    Mar 2007

    Posted 20 Aug 2008 Link to this post

    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.
  3. Vithiya
    Vithiya avatar
    41 posts
    Member since:
    May 2008

    Posted 21 Aug 2008 Link to this post

    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
  4. Plamen Peshev
    Admin
    Plamen Peshev avatar
    885 posts

    Posted 22 Aug 2008 Link to this post

    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.
  5. Vithiya
    Vithiya avatar
    41 posts
    Member since:
    May 2008

    Posted 22 Aug 2008 Link to this post

    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

  6. Plamen Peshev
    Admin
    Plamen Peshev avatar
    885 posts

    Posted 22 Aug 2008 Link to this post

    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.
  7. Vithiya
    Vithiya avatar
    41 posts
    Member since:
    May 2008

    Posted 22 Aug 2008 Link to this post

    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

Back to Top