I needed to add context menus to some tables of my intranet application. After trying some components I found one that does everything I need and has no overhead. In this posting I will show you how to use jQuery context
menu plug-in and how to attach it to tables. I found context
menu plug-in by Chris Domigan and it was very easy to integrate to my application (when comparing some other plug-ins that work only on demo pages and in simple scenarios). Thanks, Chris, for great work! Now let’s use this context
menu plug-in with table. Before we go on let’s see what we are trying to achieve. The following screenshot fragment shows simple context
menu that we want to attach to our table. And when we click some
menu option then something should happen too. :) Installing context
menu plug-in Download plug-in (if download link is broken then open demo page and I think you know how to get plug-in from there). Copy jquery.contextmenu.js to your scripts folder. Include it in your masterpage or in the page where you plan to use context menus. Make sure plug-in is included correctly (use Firebug or some other tool you like). Save the page. Defining context
menu Now let’s define context
menu. Here is fragment on context
menu definition from my code. <div class="contextMenu" id="myMenu1"> <ul> <li id="email"><img src="/img/e-mail.png" />E-mail</li> <li id="homepage"><img src="/img/homepage.png" />Homepage</li> </ul> </div> div with id myMenu1 is container of context
menu. Unordered list inside container defines items in context
menu – simple and elegant! Adding context
menu to table I have table with persons. It is simple HTML. I omitted commands column from this and the next table to keep them simple and more easily readable. <table> <tr> <th>Name</th> <th>Short</th> <th>Address</th> <th>Mobile</th> <th>E-mail</th> </tr> <% foreach(var person in Model.Results) { %> <tr> <td><%=person.FullName %></td> <td><%=person.ShortName %></td> <td><%=person.FullAddress %></td> <td><%=person.Mobile %></td> <td><%=person.Email %></td> </tr> <% } %> </table> To get context
menu linked to table rows first cells we need to specify class for cells and ID. We need ID because we have to know later which ID has the row on which user selected something from context
menu. <table> <tr> <th>Name</th> <th>Short</th> <th>Address</th> <th>Mobile</th> <th>E-mail</th> </tr> <% foreach(var person in Model.Results) { %> <tr> <td class="showContext" id="<%= person.Id %>"><%=person.FullName %></td> <td><%=person.ShortName %></td> <td><%=person.FullAddress %></td> <td><%=person.Mobile %></td> <td><%=person.Email %></td> </tr> <% } %> </table> Now we have only one thing to do – we have to write some code that attaches context
menu to table cells. Catching context
menu events Now we will make everything work. Relax, it is only couple of lines of code, thank to jQuery. <script type="text/javascript"> $(document).ready(function () { $('td.showContext').contextMenu('myMenu1', { bindings: { 'email': function (t) { document.location.href = '/contact/sendmail/' + t.id; }, 'homepage': function (t) { document.location.href = '/contact/homepage/' + t.id; } } }); }); </script> I think that first lines doesn’t need any comments. Take a look at bindings. We gave ID to table cells because it is carried also to bound events. We can use also more complex ID-s if we have more than one table with context menus on our form. Now we are done. Save all files, compile solution, run it and try out how context
menu works. Conclusion We saw than using jQuery with context
menu component allows us easily create powerful context menus for our user interfaces. Context
menu was very easy to define. We were also able to attach context
menu to table and use ID of current row entity also in events of context
menu. To achieve this we needed only some minor modifications in view and couple of lines of JavaScript.
