Start Building Professional
Web Apps Today

Gridbox expands outside table in IE and Advanced grouping

Needing help with advanced sorting and display issue.

What I am trying to do is a advanced group. First I would like to group by the first column, which will have a 1 or 2 in the column. Then I  want to hide the row if it has a H value in the second column, but I want to display the information from the 7th colum in that row as the heading for the sort group.. I don't know if this is possible.

 

The second issue I have is in IE the gridbox is not staying within my table. When the data is expanded it displays outside the table border. It works perfectly in FF.

Example:

<table cellpadding="0" cellspacing="0" border="1">
<tr>
<td>Menu navigation goes here</td>
<td>Gridbox is here</td>
</tr>
<table> 

 

Here is my data:
var data=[
["1","H","","","5517690491V1EAKZD","TESTACCOUNT, PRIMARY      ","<a href=\"javascript:submitform1('currentactivity','Detail','C','AAAUt6AAEAAAAdvAAD')\"> 5517690491V1EAKZD THE BEER STORE #3422     STAYNER      CD           </a>"],
["1","D","15/05","18/05","55176904J1V1E14KR","","<a href=\"javascript:submitform1('currentactivity','Detail','C','AAAUt6AAEAAAAdwAAA')\">63.10</a>"],
["1","D","25/05","27/05","55134424GP94VLPZN","","<a href=\"javascript:submitform1('currentactivity','Detail','C','AAAUt6AAEAAAAdvAAJ')\">28.00</a>"],
["1","D","23/05","25/05","55176904G1V1EAG50","","<a href=\"javascript:submitform1('currentactivity','Detail','C','AAAUt6AAEAAAAdvAAI')\">17.01</a>"],
["1","D","23/05","25/05","55176904Y1V1E9993","","<a href=\"javascript:submitform1('currentactivity','Detail','C','AAAUt6AAEAAAAdwAAI')\">28.00</a>"],
["1","D","06/06","08/06","55176904V1V1E3K85","","<a href=\"javascript:submitform1('currentactivity','Detail','C','AAAUt6AAEAAAAdwAAH')\">39.05</a>"],
["1","D","03/06","05/06","55259564R4D3SGLD1","","<a href=\"javascript:submitform1('currentactivity','Detail','C','AAAUt6AAEAAAAdwAAF')\">28.00</a>"],
["1","D","01/06","02/06","55181364FDDZ2R2XQ","","<a href=\"javascript:submitform1('currentactivity','Detail','C','AAAUt6AAEAAAAdvAAH')\">19.18</a>"],
["1","D","23/05","25/05","55176904P1V1EAEMW","","<a href=\"javascript:submitform1('currentactivity','Detail','C','AAAUt6AAEAAAAdwAAD')\">40.07</a>"],
["1","D","30/05","01/06","55134424DP94VLBHE","","<a href=\"javascript:submitform1('currentactivity','Detail','C','AAAUt6AAEAAAAdvAAG')\">31.55</a>"],
["1","D","20/05","22/05","55176904D1V1E1SKN","","<a href=\"javascript:submitform1('currentactivity','Detail','C','AAAUt6AAEAAAAdvAAF')\">44.07</a>"],
["1","D","20/05","22/05","55134424HP96035B9","","<a href=\"javascript:submitform1('currentactivity','Detail','C','AAAUt6AAEAAAAdvAAM')\">28.00</a>"],
["1","D","23/05","26/05","5517690551V1EQ1RF","","<a href=\"javascript:submitform1('currentactivity','Detail','C','AAAUt6AAEAAAAdvAAC')\">93.91</a>"],
["1","D","12/06","15/06","85316304TS73XGDD2","","<a href=\"javascript:submitform1('currentactivity','Detail','C','AAAUt6AAEAAAAdwAAG')\">28.00</a>"],
["1","D","02/06","02/06","55459454H0Y8RAHA6","","<a href=\"javascript:submitform1('currentactivity','Detail','C','AAAUt6AAEAAAAdvAAK')\">-                    497.00</a>"],
["1","D","24/05","25/05","551344250P95K34AE","","<a href=\"javascript:submitform1('currentactivity','Detail','C','AAAUt6AAEAAAAdwAAM')\">35.30</a>"],
["2","H","","","55176905018L26Z5D","TESTACCOUNT, SECONDARY    ","<a href=\"javascript:submitform1('currentactivity','Detail','C','AAAUt6AAEAAAAdwAAL')\"> 551344250P95K34AE ESSO 110 SILVERCREEK P   GUELPH       CD           </a>"],
["2","D","08/06","10/06","55459454Z18L41VRH","","<a href=\"javascript:submitform1('currentactivity','Detail','C','AAAUt6AAEAAAAdwAAK')\">20.00</a>"],
["2","D","08/06","10/06","55134424ZP95Z7E9E","","<a href=\"javascript:submitform1('currentactivity','Detail','C','AAAUt6AAEAAAAdwAAJ')\">35.25</a>"],
["2","D","08/06","09/06","55134424RP959BHYX","","<a href=\"javascript:submitform1('currentactivity','Detail','C','AAAUt6AAEAAAAdwAAE')\">520.80</a>"],
["2","D","05/06","09/06","55181364MDFTYLVJN","","<a href=\"javascript:submitform1('currentactivity','Detail','C','AAAUt6AAEAAAAdwAAC')\">31.59</a>"],
["2","D","30/05","02/06","55176904J18L18N78","","<a href=\"javascript:submitform1('currentactivity','Detail','C','AAAUt6AAEAAAAdwAAB')\">73.92</a>"],
["2","D","29/05","31/05","55134424HP9698RGP","","<a href=\"javascript:submitform1('currentactivity','Detail','C','AAAUt6AAEAAAAdvAAN')\">52.85</a>"],
["2","D","25/05","27/05","55207624GPWAS3Y4T","","<a href=\"javascript:submitform1('currentactivity','Detail','C','AAAUt6AAEAAAAdvAAL')\">34.45</a>"],
["2","D","25/05","26/05","55207624APWLDMHT7","","<a href=\"javascript:submitform1('currentactivity','Detail','C','AAAUt6AAEAAAAdvAAE')\">39.71</a>"],
["2","D","22/05","26/05","55207624APWLDMHT7","","<a href=\"javascript:submitform1('currentactivity','Detail','C','AAAUt6AAEAAAAdvAAE')\">121.03</a>"],
["2","D","15/05","20/05","55207624APWLDMHT7","","<a href=\"javascript:submitform1('currentactivity','Detail','C','AAAUt6AAEAAAAdvAAE')\">61.25</a>"],
];

I am calling the following javascript:
    <script type="text/javascript" src="/EN/js/dhtmlx.js"></script>



Here is the gird and javascript controls.
<div id="gridbox" width="100%" height="250px" style="background-color:white;overflow:hidden"></div>
<script language="JavaScript1.5" type="text/javascript">
 mygrid = new dhtmlXGridObject('gridbox');
 mygrid.setImagePath("<!--${DE_CGI_DIR}-->/codebase/imgs/");
 mygrid.setHeader("Tran_Key, Tran Type, Slip Date, Post Date, Ref. Number, Description, Amount");
 mygrid.enableAutoWidth(true);
 mygrid.enableAutoHeight(true);
 mygrid.setColumnHidden(0,true);
 mygrid.setColumnHidden(1,true);
 mygrid.setColAlign("left,left,left,left,left,left,right");
 mygrid.setColTypes("ro,ro,ro,ro,ro,ro,ro"); 
 mygrid.setColSorting("int,int,int,int,int,str,str")
 mygrid.groupBy(0);
 mygrid.init();
 
 mygrid.setSkin("light");
 mygrid.parse(data,"jsarray");
</script>

>>First I would like to group by the first column, which will have a 1 or 2 in the column
mygrid.groupBy(0);
>>Then I want to hide the row if it has a H value in the second column, but I want to display the information from the 7th colum in that row as the heading for the sort group
If you need add row with "H" value in the second column only to display grouping header better to store such information in the user data. In such case you will need to do less commands and iterations which could decrease loading perfomance. 
To hide nedessary rows you can use:
mygrid.attachEvent("onXLE",function(){
  mygrid.groupBy(0);
  mygrid.callEvent("onFilterStart",[])
  mygrid.filterBy(1,function(data){
  return data.toString().indexOf("H")==-1;
  });
  mygrid.callEvent("onFilterEnd",[])
 });

To set custom group format you can use:
mygrid.customGroupFormat=function(name,count){
 var h;
  mygrid.forEachRow(function(id){
  var val0=mygrid.cellById(id,0).getValue();
  var val1=mygrid.cellById(id,1).getValue();
  if (val0==name&&val1=="H"){
  h=mygrid.cellById(id,6).getValue();
  }
  })
  return h;
 }

Please see more information about customizing grouping here http://dhtmlx.com/docs/products/dhtmlxGrid/doc/articles/Math_operations_in_group.html#grid_mathingrp
>>The second issue I have is in IE the gridbox is not staying within my table. When the data is expanded it displays outside the table border
You are using auto widht mode. In such mode grid's container changes it's widht to fit total width of grid columns. 
Also you have to define width of the column. You can do this using setInitWidths() method:
mygrid.setInitWidths("100,100,100,100,100,100,100");

The problem I am having with the IE isn't the width of the table is is the height of the dataGrid. It expands over a form that is below the grid and outside the table.

The problem I am having with the IE isn't the width of the table is is the height of the dataGrid. It expands over a form that is below the grid and outside the table.

When I add the functions above none of my data displays:
<script language="JavaScript1.5" type="text/javascript">
 mygrid = new dhtmlXGridObject('gridbox');
 mygrid.setImagePath("<!--${DE_CGI_DIR}-->/codebase/imgs/");
 mygrid.setHeader("Tran_Key, Tran Type, Slip Date, Post Date, Ref. Number, Description, Amount");
 mygrid.enableAutoWidth(true);
 mygrid.enableAutoHeight(true);
 mygrid.setColumnHidden(0,true);
 mygrid.setColumnHidden(1,true);
 mygrid.setColAlign("left,left,left,left,left,left,right");
 mygrid.setColTypes("ro,ro,ro,ro,ro,ro,ro");
 mygrid.setColSorting("int,int,int,int,int,str,str")
 mygrid.attachEvent("onXLE",function(){
  mygrid.groupBy(0);
  mygrid.callEvent("onFilterStart",[])
  mygrid.filterBy(1,function(data){
  return data.toString().indexOf("H")==-1;
  });
  mygrid.callEvent("onFilterEnd",[])
 });
 mygrid.customGroupFormat=function(name,count){
 var h;
  mygrid.forEachRow(function(id){
  var val0=mygrid.cellById(id,0).getValue();
  var val1=mygrid.cellById(id,1).getValue();
  if (val0==name&&val1=="H"){
  h=mygrid.cellById(id,6).getValue();
  }
  })
  return h;
 
 mygrid.init();
 
 mygrid.setSkin("light");
 mygrid.parse(data,"jsarray");
</script>


Also in IE my columns are not hiding.

What version of dhtmlxGrid do you use? Could you please send us full example including .js and.css files which you are using?

The version I am using is:
dhtmlxGrid v.2.1 Standard edition build 90226

setColumnHidden, groupBy and "onXLE" event is a part of PRO version and cannot be using in the Standart version.