Columns' hiding using header menu

Try to right click on any header. And you will see the menu where columns can be hidden by checking checkboxes.


Sales	Book Title	Author	Price	In Store	Shipping	Bestseller	Date of Publication

Source

<link rel="STYLESHEET" type="text/css" href="../../codebase/dhtmlxgrid.css">
<link rel="stylesheet" type="text/css" href="../../codebase/skins/dhtmlxgrid_dhx_skyblue.css">
<script  src="../../codebase/dhtmlxcommon.js"></script>
<script  src="../../codebase/dhtmlxgrid.js"></script>
<script  src="../../codebase/ext/dhtmlxgrid_hmenu.js"></script>
<script  src="../../codebase/dhtmlxgridcell.js"></script>    
 
<style>
   .dhx_header_cmenu{
        background-color:#ffffff;
        border:2px outset silver;
        z-index:2;
    }
.dhx_header_cmenu_item{
    white-space:nowrap;
}        
</style>
 
<table width="600px">
    <tr>
        <td>
            <div id="gridbox" style="width:100%;height:270px;background-color:white;"></div>
        </td>
    </tr>
</table>
 
<script>mygrid = new dhtmlXGridObject('gridbox');
mygrid.setImagePath("../../codebase/imgs/");
mygrid.setHeader("Sales,Book Title,Author,Price,In Store,Shipping,Bestseller,Date of Publication");
mygrid.setInitWidths("50,150,100,80,80,80,80,200");
mygrid.setColAlign("right,left,left,right,center,left,center,center");
mygrid.setColTypes("dyn,edtxt,ed,price,ch,co,ra,ro");
mygrid.init();
mygrid.setSkin("dhx_skyblue");
mygrid.enableHeaderMenu();
mygrid.setColumnHidden(2, true);
mygrid.loadXML("../common/grid_16_rows_columns_manipulations.xml");</script>