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
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
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
by the column
key value. Some columns might not have a menu so, if there is one, I add those items to the menu
addItems. Just to show that I have access to other information from the DataTable, I have also used
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.
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
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
I read the
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