ASP.NET MVC: Using jQuery context menu with tables

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

1. Download plug-in (if download link is broken then open demo page and I think you know how to get plug-in from there).
2. Copy jquery.contextmenu.js to your scripts folder.
3. Include it in your masterpage or in the page where you plan to use context menus.
4. Make sure plug-in is included correctly (use Firebug or some other tool you like).
5. 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.