Back to the index of articles and examples

DataTable with Dynamic Context Menu

I've modified the example shown in the DataTable homepage about using a ContextMenu to show how you can change it depending on the cell clicked. The DataTable used is the same as in that example, same definition, same data, so I won't show how to build it. This is how the ContextMeny is created, the same as in the example:

To be able to change the contents of the menu, I listen to the beforeShowEvent which Menu inherits from Module.

To start with, I read all the information from the DataTable that I might need to decide what to show on the menu. Basically, that means references to the record and column that intersect at the cell where the right-click happened. Then I start manipulating the menu.

A tight while-loop removes all items in the current menu. In this example, I assume that the items to be shown vary on a per-column basis. This might not be so in your application, you have access to all the relevant data in the DataTable so it is up to you to decide how to do it. Anyway, I have the menu items stored in a hash table menus indexed by the column key value. Some columns might not have a menu so, if there is one, I add those items to the menu using addItems. Just to show that I have access to other information from the DataTable, I have also used setHeader and setFooter to show some extra information. This is certainly not required and perhaps not even recommended (you need to add some CSS styles for it to show properly), it is just for the sake of the example. Finally, calling render again with no arguments, refreshes the items.

If there was no menu for a particular column (or any other condition that you decide upon) I will not show the menu. Unfortunately there is no way to cancel a menu that is about to be shown so I used a simple trick, I rendered it well out of the screen. Since the ContextMenu adjusts its position according to the coordinates of the mouse, setting the left CSS attribute is fine since it will be set again by ContextMenu the next time it pops up.

This is how the menus hash looks like:

I created an object literal which I use as a hash, using the column key values as indexes. I have no menu items for the Description column to show how to handle a no-menu. For each column I have an array of menuItem configuration attributes. Here I have chosen the onclick configuration attribute which I set to the same function for all options though you would probably point it to different ones. I have used only the onclick.fn attribute, but there are others which you might find useful. Since I'm pointing all menu items to the same function, I must as well have listened to the clickEvent event, since I'm concentrating everything into a single function. Also, I made all the menus mostly the same except for the first one in each set to show that there is a difference, if only slight. You are free to use whatever configuration options you want, including submenus.

The sample function I used for all items in the menu is quite simple. From the contextEventTarget I read the record and column which might let me decide on what to do. The handler is called in the context of the clicked menuItem so this points to the clicked item. The only thing I do here is to show in an alert box a sample of information read