Back to the index of articles and examples
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