[Solved] How to show column context menu using script

[Michiel]

Hi,

Thanks for including the ability to pick the columns on a grid. However, the option is a bit hidden. You need to know that you can right click on the column headers to invoke the menu. Is there a way to programmatically trigger the menu? So we can add a button in our tool bar to guide the user to this function.
Some jQuery code to trigger an event somehow? I looked into the source code and found that it is bound to a contextmenu on the header, but I'm unable to trigger this event.

Thanks

Michiel

[Dimo]

Hello Michiel,

The described behavior can be achieved by manually creating and triggering an event with all required parameters. For example:

var headerCell = $("#Grid th.t-header").filter(":eq(0)"),
    offset = headerCell.offset(),
    ev = jQuery.Event("contextmenu");
ev.target = headerCell;
ev.which = 3;
ev.clientX = offset.left + headerCell.width() / 3;
ev.clientY = offset.top + headerCell.height() / 3;

headerCell.trigger(ev);

Kind regards,
Dimo
the Telerik team

[Michiel]

Just what I was looking for. Thanks!

[Scott]

This script works for the initial showing of the context menu. However, if I click off the context menu (causing it to hide) and then attempt to run the script again (to re-show it) the context menu doesn't re-appear.

Oddly enough right-clicking directly on the grid always works.

Any suggestions?

Thanks,

Scott

[Dimo]

Hi Scott,

I do not observe such a behavior locally - the context menu always opens using the script. Tested in Firefox 12 and IE9. Let me know if I am missing something.

Regards,
Dimo
the Telerik team

[Scott]

I need to show/hide the ContextMenu through a button click.

If I invoke your script in a click event it will only display the ContextMenu once. Clicking the button a second time causes the ContextMenu to show (and quickly hide).

For example, run this script against your sample site http://demos.telerik.com/aspnet-mvc/razor/grid/columncontextmenu and click "Content ContextMenu" ...

function showMenu () {

    var headerCell = $("#Grid th.t-header").filter(":eq(0)"),
        offset = headerCell.offset(),
        ev = jQuery.Event("contextmenu");
    ev.target = headerCell;
    ev.which = 3;
    ev.clientX = offset.left + headerCell.width() / 3;
    ev.clientY = offset.top + headerCell.height() / 3;

    headerCell.trigger(ev);

}

$("h2.example-title").click(showMenu);

[Scott]

Bump!

Dimo, can you help me out?

Thanks!

[Dimo]

Hello,

OK, let me throw some more light on the matter. The context menu is designed to close on a mouseup event, which is attached to the document. The problem is caused by the fact that the mouseup event of your custom handler propagates to the document. This should not be allowed, so the correct triggering code is:

$("h2.example-title").bind("mouseup", function(e) {
    e.stopPropagation();
    showMenu();
});

Notice the usage of mouseup, not click.

Greetings,
Dimo
the Telerik team

[Scott]

Perfect!

Thanks, Dimo!

[Thuy]

Our application was developed using the Telerik MVC Grid.  We have used the example from this posting to move the column context menu outside of the grid and tie it to a button. So when the user clicks on a button, the column context menu will appear.  This has worked out very well.  Thank you!

However, we are migrating from Telerik MVC Grid to Kendo Grid and need to support the same feature (user selects a button and the context menu appears).  For the Kendo Grid, can we show the column context menu (aka: columnMenu) from a javascript?  If so, can you please provide the code to invoke the columnMenu from javascript?  Appreciate any help that you can provide.

[Scott]

Here's a better example of what I need to do.

http://jsbin.com/ihivif/6/edit

I need to be able to click on "Show / Hide Columns" and have just the Columns Dialog appear. I don't want the User to see "Sort Ascending", "Sort Descending", or "Columns". I just want the Columns Dialog.

How can I do this?

[Dimo]

Hello Scott,

I am afraid the described isolation of only a part of the Grid column menu cannot be achieved. You can hide the sorting options with CSS:

.k-column-menu  .k-sort-asc,
.k-column-menu  .k-sort-desc
{
    display:none !important;
}

Note that the above rule will be applied to all column menus, unless you assigne a custom CSS class to the context menu and use this class instead.

Greetings,
Dimo
the Telerik team