Complex content in header
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 loading grid. Otherwise they can be created using script on the fly.
- Example of functions which can be usefull for filtering grid content (used in current sample):
</> Source
<!DOCTYPE html>
<html>
<head>
<title>Complex content in header</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
<link rel="stylesheet" type="text/css" href="../../../codebase/fonts/font_roboto/roboto.css"/>
<link rel="stylesheet" type="text/css" href="../../../codebase/dhtmlx.css"/>
<script src="../../../codebase/dhtmlx.js"></script>
<script>
var myGrid;
function doOnLoad(){
myGrid = new dhtmlXGridObject('gridbox');
myGrid.setImagePath("../../../codebase/imgs/");
myGrid.setHeader("Sales,Title,Author,Price,In Store,Shipping,Bestseller,Published");
myGrid.setInitWidths("70,150,120,80,80,80,80,100");
myGrid.setColAlign("right,left,left,right,center,left,center,center");
myGrid.setColTypes("dyn,ed,ed,price,ch,co,ra,ro");
var combobox = myGrid.getCombo(5);
combobox.put("1","1 Hour");
combobox.put("12","12 Hours");
combobox.put("24","24 Hours");
combobox.put("48","2 days");
combobox.put("168","1 week");
combobox.put("pick","pick up");
combobox.put("na","na");
myGrid.setColSorting("int,str,str,int,str,str,str,str");
myGrid.setColumnColor("white,#d5f1ff,#d5f1ff");
myGrid.setColumnMinWidth(50,0);
myGrid.enableAutoWidth(true);
myGrid.enableAutoHeight(true);
myGrid.init();
myGrid.load("../common/grid.xml", function(){
myGrid.attachHeader("#rspan,<div id='title_flt' style='width:90%'></div>,<div id='author_flt'></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>
</head>
<body onLoad="doOnLoad()">
<h1>Complex content in header</h1>
<p>Setting complex content to header</p>
<div id="gridbox" style="width:750px;height:450px;overflow:hidden"></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>
</body>
</html>
Documentation
Check documentation to learn how to use the components and easily implement them in your applications.