How to access Kendo Grid's column menu only from outside the grid and add the filter option for specific columns in the column header

Question

I am new to Kendo Grid and trying to use the columnMenu option. I need to access the column Menu function (only the ability to show/hide columns from a button outside the grid.

Answer 1

Not sure I got all requirements right, but something like this should work:

JS:

var grid = $("#grid").kendoGrid({
    dataSource: [{
        foo: "foo",
        bar: "bar"
    }],
    filterable: true,
    columnMenu: true
}).getKendoGrid();

function showMenu() {
    var offset = $(this).offset();
    var fieldName = $(this).data("field");
    var th = $(grid.thead).find("th[data-field='" + fieldName + "']");

    $(th).find(".k-header-column-menu:first").click();
    $(".k-column-menu").parent().css({
        top: offset.top + $(this).outerHeight(),
        left: offset.left
    });
}

$(document).on("click", ".grid-menu", showMenu);

CSS:

.k-header-column-menu {
    visibility: hidden
}

HTML:

    Show foo menu
    Show bar menu

(demo)

Another approach for just showing a menu with checkboxes while keeping the filter menu in the grid header:

Grid:

var grid = $("#grid").kendoGrid({
    dataSource: [{
        foo: "foo",
        bar: "bar"
    }],
    filterable: true,
    columnMenu: false
}).getKendoGrid();

Create menu entries from grid.columns:

var ds = [];
for (var i = 0, max = grid.columns.length; i < max; i++) {
    ds.push({
        encoded: false,
        text: "" + grid.columns[i].field + ""
    });
}

Menu:

$("#menu").kendoMenu({
    dataSource: [{
        text: "Menu",
        items: ds
    }],
    openOnClick: true,
    closeOnClick: false,
    open: function () {
        var selector;
        // deselect hidden columns
        $.each(grid.columns, function () {
            if (this.hidden) {
                selector = "input[data-field='" + this.field + "']";
                $(selector).prop("checked", false);
            }
        });
    },
    select: function (e) {
        // ignore click on top-level menu button
        if ($(e.item).parent().filter("div").length) return;

        var input = $(e.item).find("input.check");
        var field = $(input).data("field");
        if ($(input).is(":checked")) {
            grid.showColumn(field);
        } else {
            grid.hideColumn(field);
        }
    }
});

(demo)