Click here to Skip to main content
Click here to Skip to main content

Tagged as

Go to top

Right Click Menu using JQuery ASP.NET using C#

, 18 May 2010
Rate this:
Please Sign up or sign in to vote.
Jquery Context Menu control

Introduction

Here, I am going to introduce a JQuery Context Menu control. It is a cross-browser JavaScript class that runs on various browsers.

Background

I have created a context menu to display on a ListView control to perform some actions in a project. The context menu was Internet Explorer specific, and not cross-browser compatible. I am also including jquery HTML. I had created its layout using the HTML table and div elements and displayed it using JQuery. I have developed it as a cross-browser JQuery class.

HTML Markup for the Menu

Menu will appear whenever one of the table rows is right clicked. Menu will appear whenever one of the cells containing a lightning icon is left clicked.

    <ul id="myMenu" class="contextMenu">
    <li class="insert"><a href="#insert">Add New</a></li>        
    <li class="edit"><a href="#edit">Edit</a></li>                    
    <li class="delete"><a href="#delete">Delete</a></li>            
    </ul> 

JQuery

Adding the HTML markup for the container to be called as well as the fields and ASP.NET validation controls is shown in the image above. I added the jQuery necessary to open and close the popup with animations as well as call the hidden button that actually causes the postback once the data has been validated.

JQuery Script

<script type="text/javascript">
    $(document).ready(function() {

        $("#addNewCustomerInstructionsImg").click(function(ev) {
            toggleAddCustomerInstructions();
        });

        $("#addNewCustomerInstructionsLink").click(function(ev) {
            ev.preventDefault();
            toggleAddCustomerInstructions();
        });

        $("#addNewCustomerInstructionsClose").click(function(ev) {
            ev.preventDefault();
            toggleAddCustomerInstructions();
        });

        $("#customerResponse").fadeOut(5000);

        $(".customerRow").contextMenu({ menu: 'myMenu' }, 
	function(action, el, pos) { contextMenuWork(action, el, pos); });
       
        $(".openmenu").contextMenu({ menu: 'myMenu', leftButton: true }, 
	function(action, el, pos) { contextMenuWork(action, el.parent("tr"), pos); });
    });

        function contextMenuWork(action, el, pos) {

            switch (action) {
                case "delete":
                    {
                        var msg = "Delete " + $(el).find("#contactname").text() + "?";
                        $("#HiddenFieldRowId").val($(el).find("#customerid").text());
                        confirm(msg);
                        break;
                    }
                case "insert":
                    {
                        $("#TextBoxContactName").val("");
                        $("#TextBoxContactTitle").val("");
                        $("#TextBoxCountry").val("");
                        $("#TextBoxPhone").val("");

                        $("#addNewCustomer").modal({
                            close: true,
                            onOpen: modalOpenAddCustomer,
                            onClose: modalOnClose,
                            persist: true,
                            containerCss: ({ width: "500px", height: "275px", 
					marginLeft: "-250px" })
                        });
                        break;
                    }

                case "edit":
                    {
                        alert(
                                'Action: ' + action + '\n\n' +
                                'Element ID: ' + $(el).attr('id') + '\n\n' +
                                'X: ' + pos.x + '  Y: ' + pos.y + 
				' (relative to element)\n\n' +
                                'X: ' + pos.docX + '  Y: ' + pos.docY + 
				' (relative to document)'
                                );
                    }
            }
        }

   function modalOnClose(dialog) {
       dialog.data.fadeOut('slow', function() {
           dialog.container.slideUp('slow', function() {
               dialog.overlay.fadeOut('slow', function() {
                   $.modal.close(); // must call this to have SimpleModal       
                   // re-insert the data correctly and
                   // clean up the dialog elements
               });
           });
       });
    }    

This is how to Right Click on ListView:

Confirm Pop Up how to delete a record from ListView:

Comfirm event deleted record Jquery function:

Properties

Context menu control has only a public property. It only displays the current version of the context menu control. It does nothing else.

Events

The context menu control has only one event – The Click event that fires when items other than the separator items are clicked.

Note that the Click event handler is a C# style event handler.

Using the Control

Add a reference to the *.js files in your web page under Head Tag, as:

Under Head Tag

<script src="_assets/js/jquery-1.2.6.min.js" type="text/javascript"></script>
<script src="_assets/js/jquery.simplemodal-1.1.1.js" type="text/javascript"></script>
<script src="_assets/js/jquery.contextMenu.js" type="text/javascript"></script>

Style Sheet

Add Style sheet under head tag:

<link href="_assets/css/StyleSheet.css" rel="stylesheet" type="text/css" />
<link href="_assets/css/confirm.css" rel="stylesheet" type="text/css" />   
<link href="_assets/css/jquery.contextMenu.css" rel="stylesheet" type="text/css" />

This method will get called when you click on any item of the context menu. Don’t forget to invoke the Hide method at last in the event handler.

Conclusion

I was working for a long time to create C# like event handlers for the JQuery classes and finally, I’ve done it.

History

  • 18th May, 2010: Initial post

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Share

About the Author

composeme
Software Developer (Senior) Dotnetplace
Pakistan Pakistan
Aamir Hasan is a Sr. Software Engineer and Technical Lead in a US based firm, having five years of experiences working in Software Design, Software Analysis, Business Intelligence, Web Development, Consultancy and Training, using SQL Server, .NET Framework and provides consultancy on how to design and develop .NET application with database solutions. Aamir is the founder of www.aspxtutorial.com and dotnetplace.com. He is a Microsoft Certified and SEO professional too. He is capable of coordinating off-shore high level web development projects.


asp.net Tutorial, sample code and demo

Comments and Discussions

 
QuestionCan this thing implement on MS Chart if yes then how Pinmembermuhammadraheel27-Dec-13 21:12 
AnswerRe: Can this thing implement on MS Chart if yes then how Pinmembercomposeme30-Dec-13 23:51 
GeneralRe: Can this thing implement on MS Chart if yes then how Pinmembermuhammadraheel3-Jan-14 22:14 
GeneralRe: Can this thing implement on MS Chart if yes then how Pinmembercomposeme23-Feb-14 18:43 
GeneralMy vote of 5 PinmemberPrasyee27-Sep-12 22:20 
Questionwant selected Column and Row Index PinmemberMember 774080617-Sep-12 0:23 
AnswerRe: want selected Column and Row Index Pinmembercomposeme16-Oct-12 22:11 
GeneralMy vote of 5 Pinmembermanoj kumar choubey7-Feb-12 21:40 
GeneralMy vote of 4 Pinmembersupriya chaladi14-Sep-11 22:45 
GeneralMy vote of 3 PinmemberMember 775531417-Mar-11 23:34 
Generaluse context menu Pinmembermarzieh minooyee20-Aug-10 18:17 
GeneralMy vote of 5 Pinmemberanhduongxanh12-Jul-10 18:31 
GeneralImages Pinmemberaspdotnetdev3-Jun-10 20:05 
GeneralGood job my vote 1 Pinmemberaimosh25-May-10 1:07 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

| Advertise | Privacy | Mobile
Web03 | 2.8.140916.1 | Last Updated 18 May 2010
Article Copyright 2010 by composeme
Everything else Copyright © CodeProject, 1999-2014
Terms of Service
Layout: fixed | fluid