All components dhtmlxGrid Filtering Numeric filtering and master checkbox

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
<!DOCTYPE html>
<html>
<head>
	<title>Numeric filtering and master checkbox</title>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
	<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
	<link rel="stylesheet" type="text/css" href="../../../codebase/fonts/font_roboto/roboto.css"/>
	<link rel="stylesheet" type="text/css" href="../../../codebase/dhtmlx.css"/>
	<script src="../../../codebase/dhtmlx.js"></script>
	<style>
		div.gridbox div.ftr td{
			text-align:right;
			background-color:#E5F2F8;
			border-right: 0 solid gray;
		}
		div.gridbox_light table.hdr td {
			text-align:center;
		}
	</style>
	<script>
		var myGrid;
		function doOnLoad(){
			myGrid = new dhtmlXGridObject('gridbox');
			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("70,150,120,80,80,80,80,100");
			myGrid.setColAlign("right,left,left,right,center,left,center,center");
			myGrid.setColTypes("dyn,edtxt,ed,price,ch,co,ra,ro");
			myGrid.enableAutoWidth(true);
			myGrid.enableAutoHeight(true);
			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.load("../common/grid_08_filtering.xml");
		}
	</script>
</head>
<body onload="doOnLoad()">
	<h1>Numeric filtering and master checkbox</h1>
	<p> 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.<br/>
		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.
	</p>
	<div id="gridbox" style="width: 750px; height: 550px; background-color:white;"></div>
</body>
</html>

Documentation

Check documentation to learn how to use the components and easily implement them in your applications.