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

Question

I am new to Kendo Grid and am trying to use the columnMenu parameter. I need to access the column menu function (only the ability to show / hide columns from a button outside the grid. This link allows me to do this, and it works fine. How to show a Kendo Grid column using a script

But this still saves the columnMenu parameter in the column headers that I don't need. Therefore, having studied it further, I was able to delete the column headers at boot using defaultGrid.thead.find ("[Field data = Address]> K-header of the menu column.") Delete () ;.
where Address is one of the columns in the grid. I still need to have at least one column with the columnMenu parameter, otherwise the solution in the above URL does not work.

Using the solution in the link above, it also removes the filter parameter in the columns. What I need is to remove the column menu from all column headings (and access the show / hide column option from outside the grid), and also select the filter option for specific grid columns

Is this possible, and how can I do this? Please, help

Answer 1

Not sure if I got all the requirements correctly, 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:

 <div id='grid'></div> <div> <button class='grid-menu' data-field="foo">Show foo menu</button> <button class='grid-menu' data-field="bar">Show bar menu</button> </div> 

( demo )

Another approach is to simply display the checkbox menu while saving 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: "<label><input type='checkbox' checked='checked' " + " class='check' data-field='" + grid.columns[i].field + "'/>" + grid.columns[i].field + "</label>" }); } 

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 )

Answer 2

This is a pretty old thread, but after searching for similar things, I found a post on the Terlerik forum where the user is linking to "kendoColumnMenu". As far as I can tell, this is undocumented.

It also shows how to add additional parameters to the menu created to save the state of the grid or other configuration parameters of your choice.

Here is a link to a post that also contains a link to DOJO with working code: Click here

Hope this helps someone else find this.