Start Building Professional
Web Apps Today


 
Categories Question details Back To List
Question  posted by Vaidehi on Sep 16, 2008 03:17
open dhtmlx forum
implementing combox in header and paging in grid

hello sir


using some samples of dhtmlXGrid i created new grid but i hav 2 problems in it .

1) in combobox which is at header do not show other option than "all authors"

2) paging not done properly where as i use the method enablePaging(); and give id as recinfoArea, pagingArea to two td tags of table
but it do not shows the number of records and next & forward button.

the whole code is as
[code]
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link rel="STYLESHEET" type="text/css" href="Codebase1/dhtmlxgrid.css">
<link rel="STYLESHEET" type="text/css" href="Codebase1/dhtmlxgrid_pgn_bricks.css">
<script src="Codebase1/dhtmlxcommon.js"></script>
<script src="Codebase1/dhtmlxgrid.js"></script>
<script src="Codebase1/dhtmlxgridcell.js"></script>
<script src="Codebase1/dhtmlXGrid_pgn.js"></script>
<script src="Codebase1/dhtmlxgrid_srnd.js"></script>


<script>
function eY(){

var mygrid = new dhtmlXGridObject('gridbox');
mygrid.setImagePath("Codebase/imgs/");
mygrid.setSkin("modern");
mygrid.setHeader("Sales,Title,Author,Price,In Store,Shipping,Bestseller,Published");

mygrid.setInitWidths("50,150,150,80,80,80,80,*");

mygrid.setColAlign("right,left,left,right,center,left,center,center");

mygrid.enablePaging(true,5,3,"pagingArea",true,"recinfoArea");

mygrid.getCombo(5).put(2,2);


mygrid.init();

mygrid.loadXML("grid.xml",function(){
mygrid.attachHeader("#rspan,<div id='title_flt'></div>,<div id='author_flt'>
</div>,#rspan,#rspan,#rspan,#rspan,#rspan");

document.getElementById("title_flt").appendChild(document.getElementById("title_flt_box").childNodes[0])


var authFlt =
document.getElementById("author_flt").appendChild(document.getElementById("author_flt_box").childNodes[0]);
populateSelectWithAuthors(authFlt);

mygrid.setSizes();

}
);
mygrid.setColSorting("int,str,str,int,str,str,str,str");
mygrid.enableSmartRendering(true);
}

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<11;i++){
alert("in side for loop");
var authNm = mygrid.cells2(i,2).getValue();
alert("second line loop");
if(usedAuthAr._dhx_find(authNm)==-1){
selObj.options.add(new Option(authNm,authNm))
usedAuthAr[usedAuthAr.length] = authNm;
}
            
        }
}
        function populateSelectWithAuthors(selObj){

            selObj.options.add(new Option("All Authors",""))

            var usedAuthAr = new dhtmlxArray();

            for(var i=0;i<11;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>

<title>JSP Page</title>
</head>
<body onload="eY();">


<table width="500" >
<tr >
<td id="recinfoArea"></td>
</tr>
<tr>
<td>
<div id="gridbox" style="width:800px;height:250px;"></div>
</td>
</tr>
<tr>
<td id="pagingArea"></td>
</tr>
</table>

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



</body>
</html>

[code end]

sir the two method not working are
i) mygrid.cells2(i,2).getValue();
ii) mygrid.getRowsNum()

Answer posted by dhtmlx support on Sep 17, 2008 01:55
1. There is no need to populate combobox, this can be done automaticlly if you use #combo_filter as header value. Like this: http://www.dhtmlx.com/docs/products/dhtmlxGrid/samples/filtering/pro_filter_combo.html
2. Using Paging you do not need to enable SmartRendering
Answer posted by Support on Sep 17, 2008 02:07
Try to set attachHeader method before init() call:

mygrid.setHeader("Sales,Title,Author,Price,In Store,Shipping,Bestseller,Published");
mygrid.attachHeader("#rspan,<div id='title_flt'></div>,<div id='author_flt'>
</div>,#rspan,#rspan,#rspan,#rspan,#rspan");

We have tested the provided code. It works correctly: combo has options with all authors and paging works. 

If problem persists, please, contact us at the support@dhtmlx.com and provide your ref. number. We will send you the sample with the latest grid files.