<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/dhtmlxgridcell.js"></script>    
 
 
 
<div id="gridbox" style="width:600px; height:300px; background-color:white;"></div>
<ul>
    <li>Complex objects to use in grid header can be created in invisible container and attached to div elements in grid header after loading grid. 
    Otherwise they can be created using script on the fly.</li>
    <li>Example of functions which can be usefull for filtering grid content (used in current sample):</li>
</ul>
<div style="display:none">
<div id="title_flt_box"><input type="text" style="width: 100%; border:1px solid gray;" onClick="(arguments[0]||window.event).cancelBubble=true;" onKeyUp="filterBy()"></div>
<div id="author_flt_box"><select style="width:100%" onclick="(arguments[0]||window.event).cancelBubble=true;" onChange="filterBy()"></select></div>
</div>
<script>
function doOnLoad() {
    mygrid = new dhtmlXGridObject('gridbox');
    mygrid.setImagePath("../../codebase/imgs/");
    mygrid.setHeader("Sales,Title,Author,Price,In Store,Shipping,Bestseller,Published");
    mygrid.setInitWidths("50,150,150,80,80,80,80,200");
    mygrid.setColAlign("right,left,left,right,center,left,center,center");
    mygrid.setColTypes("dyn,ed,ed,price,ch,co,ra,ro");
    mygrid.getCombo(5).put(2, 2);
    mygrid.setColSorting("int,str,str,int,str,str,str,str");
    mygrid.setColumnColor("white,#d5f1ff,#d5f1ff");
    mygrid.setColumnMinWidth(50, 0);
    mygrid.setSkin("dhx_skyblue");
    mygrid.init();
    mygrid.loadXML("../common/grid.xml", function() {
        mygrid.attachHeader("#rspan,<div id='title_flt' style='padding-right:3px'></div>,<div id='author_flt' style='padding-right:3px'></div>,#rspan,#rspan,#rspan,#rspan,#rspan");
        //set title filter field;
        document.getElementById("title_flt").appendChild(document.getElementById("title_flt_box").childNodes[0]);
        //set author fiter field;
        var authFlt = document.getElementById("author_flt").appendChild(document.getElementById("author_flt_box").childNodes[0]);
        populateSelectWithAuthors(authFlt);
        //block sorting and resize actions for second row;
        mygrid.hdr.rows[2].onmousedown = mygrid.hdr.rows[2].onclick = function(e) { (e || event).cancelBubble = true;
        }
        mygrid.setSizes();
    });
}
function filterBy() {
    var tVal = document.getElementById("title_flt").childNodes[0].value.toLowerCase();
    var aVal = document.getElementById("author_flt").childNodes[0].value.toLowerCase();
    for (var i = 0; i < mygrid.getRowsNum(); i++) {
        var tStr = mygrid.cells2(i, 1).getValue().toString().toLowerCase();
        var aStr = mygrid.cells2(i, 2).getValue().toString().toLowerCase();
        if ((tVal == "" || tStr.indexOf(tVal) == 0) && (aVal == "" || aStr.indexOf(aVal) == 0));
        mygrid.setRowHidden(mygrid.getRowId(i), false);
        else;
        mygrid.setRowHidden(mygrid.getRowId(i), true);
    }
}
function populateSelectWithAuthors(selObj) {
    selObj.options.add(new Option("All Authors", ""));
    var usedAuthAr = new dhtmlxArray();
    for (var i = 0; i < mygrid.getRowsNum(); i++) {
        var authNm = mygrid.cells2(i, 2).getValue();
        if (usedAuthAr._dhx_find(authNm) == -1) {
            selObj.options.add(new Option(authNm, authNm));
            usedAuthAr[usedAuthAr.length] = authNm;
        }
    }
}</script>