<!-- Create complex objects with HTML in hidden container -->
    <div style="display:none">
        <div id="title_flt_box"><input type="100%" style="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>
 
        mygrid = new dhtmlXGridObject('gridbox');
        ...
        mygrid.loadXML("grid.xml", function(){
    //create second header row
        mygrid.attachHeader("#rspan,<div id='title_flt'></div>,<div id='author_flt'></div>,#rspan,#rspan,#rspan,#rspan,#rspan");
    //append filter for 2nd column
        document.getElementById("title_flt").appendChild(document.getElementById("title_flt_box").childNodes[0])
    //append filter for 3rd column
        var authFlt = document.getElementById("author_flt").appendChild(document.getElementById("author_flt_box").childNodes[0]);
        populateSelectWithAuthors(authFlt);
    //correct grid proportions if necessary
        mygrid.setSizes();
    });</script>

 
    
    //filter grid contnet based on values of two filter fields
    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)
        }
    }
    
    //populate filter select box with possible column values
    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;
            }
        }
    }