<link rel="STYLESHEET" type="text/css" href="../../../dhtmlxGrid/codebase/dhtmlxgrid.css">
<link rel="stylesheet" type="text/css" href="../../../dhtmlxGrid/codebase/skins/dhtmlxgrid_dhx_skyblue.css">
<script  src="../../../dhtmlxGrid/codebase/dhtmlxcommon.js"></script>
<script  src="../../../dhtmlxGrid/codebase/dhtmlxgrid.js"></script>
<script  src="../../../dhtmlxGrid/codebase/ext/dhtmlxgrid_filter.js"></script>
<script  src="../../../dhtmlxGrid/codebase/dhtmlxgridcell.js"></script>    
 
<link rel="STYLESHEET" type="text/css" href="../../../dhtmlxForm/codebase/skins/dhtmlxform_dhx_skyblue.css">
<script  src="../../../dhtmlxForm/codebase/dhtmlxform.js"></script>    
<script type="text/javascript" src="../../codebase/datastore.js"></script>
 
 
<div id="gridbox2" style="width:600px; height:70px; background-color:white;"></div>
<input type="button" value="filter">
<div id="gridbox" style="width:600px; height:270px; background-color:white;"></div>
<script>
mygrid = new dhtmlXGridObject('gridbox');
mygrid.setSkin("dhx_skyblue");
mygrid.setHeader("Count,Name");
mygrid.setColumnIds("Count,Name");
mygrid.init();
mygrid.load("../common/data/grid.xml");
var formData = [{
    type: "label",
    label: "Filter"
}, {
    type: "input",
    name: "Name",
    value: "",
    labelWidth: 100,
    label: "Name"
}, ];
myform = new dhtmlXForm("gridbox2", formData);
mygrid.bind(myform, function(data, master) {
    if (master.Name == "")
        return true;
    return mygrid.cells(data, 1).getValue().toLowerCase().indexOf(master.Name) != -1;
});</script>