Header Menu

Suite and Optimus Suite 5
#1

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(“

Player
,
GP</div,
GS</div,
MIN</div,
G</div,
A</div,
PKM</div,
PKA</div,
SOG</div,
GWG</div,
GWA</div,
Hat</div,
BLK</div,
CK</div,
CC</div,
FC</div,
EC</div,
FS</div,
Pts</div,
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();



#2

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


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