How to show Kendo Grid's columnMenu using script

Question

The Kendo Grid has a really nice column context menu (aka: columnMenu) which you can access by right clicking on each column header. The menu is enabled by setting the field in the Kendo Grid to:

columnMenu: true

When the columnMenu is enabled, it displays the columns in the grid and allows you to show/hide columns, sort, and filter on them. However, we have a requirement to move this column menu outside of the grid and tie it to a button. So when the user clicks on a button, the column menu will appear. Is there a way to invoke this via javascript?

This request is similar to one made by Michiel (March 5, 2012). However, in that particular case, it was a request for the contextMenu for a different product, the Telerik MVC Grid. The URL for Michiel's question is below as a reference: http://www.telerik.com/community/forums/aspnet-mvc/grid/how-to-show-column-context-menu-using-script.aspx

Answer 1

It is as simple as triggering the click event of the column:

$("#grid .k-header-column-menu:first").click();

Here is a working demo: http://jsbin.com/ihivif/2/edit