Start Building Professional
Web Apps Today

many grids in one site

hi

by using 3 grids at same position in a html-site (shown by a tab-javascript with 'block' and 'none' ) the rows are not displayed; Modifiying the grid works (adding, saving) and when just one grid is addet to the html-site the rows are visible. What is the reason for this - the row Id's are numeric incremented, maybe every grid needs a own id like grid1_row1.

Mario

Plase check if every grid has own container with unique ID and each row in the grids has unique ID. 

grid-containerID and rowID's are with unique ID's

You can try to call
   grid.setSizes()
after switching grid to visible state, because it can't set sizes correctly while in hidden state. 

that has no effect. The functions .. addRow, deleteRow .. are working - but further i can't see the rows.

code snipplet

<ul id="tabmenu">
<li class="active"><a href="javascript:void(0);" onclick="Row.ChangeList(this,'a'); this.blur(); return false;">###LIST_1###</a></li>
<li class=""><a href="javascript:void(0);" onclick="Row.ChangeList(this,'b'); this.blur(); return false;">###LIST_2###</a></li>
<li class=""><a href="javascript:void(0);" onclick="Row.ChangeList(this,'c'); this.blur(); return false;">###LIST_3###</a></li>
</ul>

<!-- grid1, grid2, grid3 -->

<div id="list-a" style="z-index:1; display: block;">
<div id="blk-area-a" class="blk-area"> 
<div id="mod_grid_grid1"></div>
<script type="text/javascript">

 var grid1 = new dhtmlXGridObject("mod_grid_grid1");
 grid1.imgURL = "mcmd_templates/common/lib/dhtmlxGrid/codebase/imgs/";
 grid1.setSkin('light');
 grid1.objBox.style.overflowX = 'hidden';
 
 
 grid1.setHeader(",#cspan,Dateiname,#cspan,Format");
 grid1.setInitWidths("30,30,200,30,*");
 grid1.setColAlign("left,left,left,left,left"); 
 grid1.setColTypes("ch,ro,ed,ro,coro");   
 
 grid1.enableMultiselect(true); 
 
 grid1.init(); 

 gridQString = 'index.php?mime=xml&mod=configuration&pi=blk_collect&menu=2&block=6&id=1000002/10000/1000/800667788031&gridtab=1&total=1';
 grid1.loadXML(gridQString);          

 
</script>
</div>
<script type="text/javascript">
 Row.prototype.ChangeList = function(objThis,value)
 {
  this.list = value;  
  
  if(value=='a') {
   
   document.getElementById('grid_Tab').value='1';
   objThis.parentNode.parentNode.getElementsByTagName("li")[0].className = 'active';
   objThis.parentNode.parentNode.getElementsByTagName("li")[1].className = '';
   objThis.parentNode.parentNode.getElementsByTagName("li")[2].className = '';
   
   document.getElementById('list-a').style.display = 'block';
   document.getElementById('list-b').style.display = 'none';
   document.getElementById('list-c').style.display = 'none';
   
   grid1.setSizes();

    } else if (value=='b') ....
</script>