| Sample: dhtmlxGrid | Complex content in header | dhtmlxGrid main page |

Setting complex content to header

- Complex objects to use in grid header can be created in invisible container and attached to div elements in grid header after grid loaded. Or they can be created with script on the fly

        <!-- 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>

- Example of functions which can be usefull for filtering grid content (used in current sample):

        //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;
                }
            }
        }