javascript - 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 -

I'm new to the Kendo grid and am trying to use the column menu option. I need the column menu function (the ability to show / hide the column from a button only outside the grid). This link allows me to do this and it's working fine.

But it still retains the column menu option in the column header which I do not want. So looking forward to this, I can remove column headers on load using # defaultGrid.thead.find ("[data-field = Address] & gt; K-header-column-menu"). Remove ();
Where Address is one of the columns in the grid. I still need at least one column with the column menu option, or the solution in the next URL is not working.

Using the given solution in the link given above, it also removes the filter option on the column. What do I need to achieve, the column menu has been removed from all the column headers (and hide the column options from outside the show / grid) and it also has the filter option available for specific columns of the grid < P> Is it possible and how do I do it? Please note that all the requirements have been met, but something like this should be done:

/ P>

$ ("# Grid") KendoGrid ({.getKendoGrid (); function showmenu () {var offset = $ (this) .offset (); Var field name = $ (this) .data ("field"); var th = $ (grid Thead) .find (click "th [data field = '" + fieldname + "']"); $ (th) .find ("k-header column-menu: first.") ($) ". -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:  
  & lt; div id = 'grid' & gt; & lt; / div & gt; & lt; div & gt; ; & Lt; button class = 'grid-menu' data-field = "foo" & gt; f Show oo menu & lt; / button & gt; & lt; button class = 'grid-menu' data-field = "bar" & gt; Show bar menu & lt; / button & gt; & lt; / div & gt; ;      
 ()  
 ()  
 Putting a filter menu in the grid header Another way to show a menu with the checkboxes that occurred:  
 Grid:  
  var grid = $ ("# grid"). Kendo Grid ({Datasource: [[foo: "foo", bar: "bar"}], filterable: true, column menu: wrong}). GetKendoGrid ();   
 Create menu entries from grid.column:  
  var ds = []; (Var i = 0, max = grid.column.length; i & lt; max; i ++) {ds.push ({encoded: false, text: " label   
 Menu:  
  $ (" # menu "). Kandmenu ({Datasource: [{text:" Menu ", item: DS}], OpenOnClick: true, closeOnClick: incorrect, open: function () {var selector; // unselect hidden columns $ .each (grid.column, function () {if (this .hidden) {selector = "input [data-field = '" + this.field + "']"; $ (selector) .prop ("check", gal );}})}}, Select: function (e) {// unselected top-level menu button if click ($ (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);}}});   
 ()