DHTMLX Docs & Samples Explorer

Numeric filtering and master checkbox

Grid provides filtering by a numeric value. Just try to enter value in the header. Setting special parameters in footer allows to process column's numeric data.
Sample demonstates also the master checkbox in the header. Try to select checkbox and then all cells in a column will be checked, vice versa as well.

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" type="text/javascript"></script>
<script src="../../codebase/dhtmlxgrid.js" type="text/javascript"></script>
<script src="../../codebase/dhtmlxgridcell.js" type="text/javascript"></script>
<script src="../../codebase/ext/dhtmlxgrid_filter.js" type="text/javascript"></script>
<style>
    div.gridbox div.ftr td{
        text-align:right;
        background-color:#E5F2F8;
        border-right:0px solid gray;
    }
    div.gridbox_light table.hdr td {
        text-align:center;
    }
</style>
 
 
<div id="gridbox" style="width: 600px; height: 350px; background-color:white;"></div>
<script>
mygrid = new dhtmlXGridObject('gridbox');
mygrid.setSkin("dhx_skyblue");
mygrid.setImagePath("../../codebase/imgs/");
mygrid.setHeader("Sales,Book Title,Author,Price,In Store,Shipping,Bestseller,Date of Publication");
mygrid.attachHeader("1,2,3,#numeric_filter,#master_checkbox,6,stat,8");
mygrid.setInitWidths("50,170,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.attachFooter(' ${#stat_total},Total sales,-,#cspan,#cspan,#cspan,#cspan,#cspan');
mygrid.attachFooter('{#stat_max},Max sales,-,#cspan,#cspan,#cspan,#cspan,#cspan');
mygrid.attachFooter('{#stat_min},Min sales,-,#cspan,#cspan,#cspan,#cspan,#cspan');
mygrid.attachFooter('{#stat_average},Average sales,-,#cspan,#cspan,#cspan,#cspan,#cspan');
mygrid.attachFooter('{#stat_count},Count of rows,-,#cspan,#cspan,#cspan,#cspan,#cspan');
mygrid.attachFooter('${#stat_multi_total}0:3,Total sum (Sales*Price),-,#cspan,#cspan,#cspan,#cspan,#cspan');
mygrid.loadXML("../common/grid_08_filtering.xml");
</script>