Sample: dhtmlxGrid | Complex content in header | dhtmlxGrid main page |
Setting complex content to header
<!-- 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></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(); });
//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; } } }
© DHTMLX LTD. All rights reserved |