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.

THIS PAGE CONTAINS SAMPLE FUNCTIONALITY OF PROFESSIONAL EDITION FOR DEMONSTRATION PURPOSE ONLY.
UNAUTHORIZED USE IS PROHIBITED. PLEASE CONTACT SALES@DHTMLX.COM TO OBTAIN A LEGAL COPY OF PROFESSIONAL EDITION.

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>