Start Building Professional
Web Apps Today

Header Menu

I have the pro edition of the grid and I'm trying to enable the header menu in order to allow users to hide columns. But when I right click nothing seems to be happening. Would there be any setting that would prevent the header menu from displaying? My grid displays fine. Just seems like the header menu checkboxes don't display.

My code is as follows:

var mygrid;
        
function doInitGrid(){

// Initializing the grid
mygrid = new dhtmlXGridObject('mygrid_container');
mygrid.setImagePath("../js/dhtmlx/dhtmlxGrid/codebase/imgs/");
            
// Set column names of grid
mygrid.setHeader("<div title='Player'>Player</div>,<div title='Games - Games Played'>GP</div,<div title='Games Started '>GS</div,<div title='Minutes played'>MIN</div,<div title='Goals'>G</div,<div title='Assists'>A</div,<div title='Penalty Kicks Made'>PKM</div,<div title='Penalty Kicks Attempted'>PKA</div,<div title='Shots on Goal'>SOG</div,<div title='Game Winning Goal'>GWG</div,<div title='Game Winning Assist'>GWA</div,<div title='Hat Trick - Three Goals in a Single Game'>Hat</div,<div title='Blocked Shots'>BLK</div,<div title='Corner Kick'>CK</div,<div title='Cautions Committed (Yellow Card)'>CC</div,<div title='Fouls Committed'>FC</div,<div title='Ejections Committed (Red Card)'>EC</div,<div title='Fouls Suffered'>FS</div,<div title='Points = G x 2 + A'>Pts</div,<div title='Shooting Percentage = G / SOG'>Pct</div");

mygrid.setInitWidths("100,*,*,*,*,*,*,*,*,*,*,*,*,*,*,*,*,*,*,*");
mygrid.setColAlign("left,right,right,right,right,right,right,right,right,right,right,right,right,right,right,right,right,right,right,right");
mygrid.enableResizing("false,false,false,false,false,false,false,false,false,false,false,false,false,false,false,false,false,false,false,false");
mygrid.setEditable(false);
mygrid.attachFooter('Total,193,130,8678.30,12,7,4,8,55,3,1,0,0,21,8,51,0,57,31,0.22', ['text-align: left; font-size: 11px; font-style: normal; background-color: gold','text-align: right; font-size: 11px; font-style: normal; background-color: gold','text-align: right; font-size: 11px; font-style: normal; background-color: gold','text-align: right; font-size: 11px; font-style: normal; background-color: gold','text-align: right; font-size: 11px; font-style: normal; background-color: gold','text-align: right; font-size: 11px; font-style: normal; background-color: gold','text-align: right; font-size: 11px; font-style: normal; background-color: gold','text-align: right; font-size: 11px; font-style: normal; background-color: gold','text-align: right; font-size: 11px; font-style: normal; background-color: gold','text-align: right; font-size: 11px; font-style: normal; background-color: gold','text-align: right; font-size: 11px; font-style: normal; background-color: gold','text-align: right; font-size: 11px; font-style: normal; background-color: gold','text-align: right; font-size: 11px; font-style: normal; background-color: gold','text-align: right; font-size: 11px; font-style: normal; background-color: gold','text-align: right; font-size: 11px; font-style: normal; background-color: gold','text-align: right; font-size: 11px; font-style: normal; background-color: gold','text-align: right; font-size: 11px; font-style: normal; background-color: gold','text-align: right; font-size: 11px; font-style: normal; background-color: gold','text-align: right; font-size: 11px; font-style: normal; background-color: gold','text-align: right; font-size: 11px; font-style: normal; background-color: gold']);            

mygrid.enableAutoHeight(true);
mygrid.enableAutoWidth(true);
mygrid.enableColumnMove(true);
mygrid.enableHeaderMenu(true);
mygrid.setSkin("modern");
mygrid.init();

mygrid.addRow("Allen Miller", "Allen Miller,7,2,297.00,0,0,0,0,1,0,0,0,0,0,0,2,0,0,0,0.00");mygrid.addRow("Brent Gardner", "Brent Gardner,16,23,246.30,0,0,0,0,1,0,0,0,0,0,1,4,0,4,0,0.00");mygrid.addRow("Caleb Kearley", "Caleb Kearley,10,1,183.00,0,0,0,0,1,0,0,0,0,0,0,0,0,2,0,0.00");mygrid.addRow("Chase Tew", "Chase Tew,6,4,204.00,0,0,0,0,0,0,0,0,0,0,1,3,0,4,0,0.00");mygrid.addRow("Christian Dean", "Christian Dean,2,0,38.00,0,0,0,0,0,0,0,0,0,0,0,0,0,1,0,0.00");mygrid.addRow("Corbin Morrisette", "Corbin Morrisette,10,10,770.00,0,0,0,0,0,0,0,0,0,0,0,1,0,4,0,0.00");mygrid.addRow("Diego Chulan", "Diego Chulan,10,10,432.00,1,0,0,0,3,0,0,0,0,0,1,2,0,6,2,0.00");mygrid.addRow("Dustin Holland", "Dustin Holland,10,10,485.00,0,1,0,0,1,0,1,0,0,0,0,1,0,1,0,0.00");mygrid.addRow("Ethan Gardner", "Ethan Gardner,20,8,623.00,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0.00");mygrid.addRow("Hayden Price", "Hayden Price,10,10,725.00,0,0,0,0,0,0,0,0,0,0,0,2,0,3,0,0.00");mygrid.addRow("Hunter Hamm", "Hunter Hamm,2,0,25.00,0,0,0,0,0,0,0,0,0,0,0,1,0,1,0,0.00");mygrid.addRow("Jhonatan Perez", "Jhonatan Perez,8,0,193.00,0,0,0,0,0,0,0,0,0,0,0,2,0,1,0,0.00");mygrid.addRow("Jordan McKevitt", "Jordan McKevitt,7,1,245.00,0,0,0,0,1,0,0,0,0,0,1,1,0,0,0,0.00");mygrid.addRow("Kyle Ernest", "Kyle Ernest,9,9,667.00,0,0,0,0,0,0,0,0,0,0,0,5,0,4,0,0.00");mygrid.addRow("Miguel Ortiz", "Miguel Ortiz,10,10,710.00,2,0,0,0,7,0,0,0,0,0,1,4,0,1,0,0.29");mygrid.addRow("Mustfa Kathawala", "Mustfa Kathawala,2,0,17.00,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0.00");mygrid.addRow("Phillip Byrd", "Phillip Byrd,3,0,59.00,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0.00");mygrid.addRow("Ryan Allis", "Ryan Allis,8,8,614.00,1,3,1,1,13,0,0,0,0,0,1,6,0,7,5,0.08");mygrid.addRow("Ryan Mullins", "Ryan Mullins,10,9,611.00,2,0,0,0,10,0,0,0,0,0,0,5,0,4,0,0.20");mygrid.addRow("Stephan Margeson", "Stephan Margeson,9,4,360.00,0,0,0,0,1,0,0,0,0,0,0,0,0,2,0,0.00");mygrid.addRow("Tom Schneider", "Tom Schneider,9,0,293.00,0,1,0,1,0,0,0,0,0,0,0,1,0,0,1,0.00");mygrid.addRow("Trevor Parrish", "Trevor Parrish,10,9,706.00,6,2,3,6,16,3,0,0,0,21,2,11,0,12,14,0.38");mygrid.addRow("Will Haynes", "Will Haynes,5,2,175.00,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0.00");        

}
    
doInitGrid();

Please try to move enableHeaderMenu command after grid.init

mygrid.setSkin("modern");
mygrid.init();
mygrid.enableHeaderMenu(true);

Also, be sure that necessary css added to the page

<style>
       .dhx_header_cmenu{
            background-color:#ffffff;
            border:2px outset silver;
        }
    .dhx_header_cmenu_item{
        white-space:nowrap;
    }       

</style>