Start Building Professional
Web Apps Today


 
Categories Question details Back To List
Question  posted by VS on Jul 05, 2009 12:47
open dhtmlx forum
Tabbar with multiple grids

Hi,
I have a tabbar with two tabs. Each tab has a dhtmlxgrid. For some reason when I attach footer to both the grids one of the grid gets misaligned.Only one footer is Ok. but when i attach both, there is an issue

Code is

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Job Status</title>
<link rel="STYLESHEET" type="text/css" href="dhtmlx_pro_full/dhtmlx.css">
<script src="dhtmlx_pro_full/dhtmlx.js"></script>
<script>
        var eqInvGroupGrid,fiInvGroupGrid,tabbar,cal1,dhxLayout,statusBar;
        var timeoutHnd;
        var flAuto = false;
        var anlysDate = "<%=DateUtil.getDateString(new Date())%>";
        window.dhx_globalImgPath="dhtmlx_pro_full/imgs/";
        function doOnLoad(){
            dhxLayout = new dhtmlXLayoutObject("parentId", "2U");
            statusBar = dhxLayout.cells("b").attachStatusBar();
            //statusBar.setText("<div width='700px'>hello</div>");
            tabbar=dhxLayout.cells("a").attachObject("caldate");
            dhxLayout.cells("a").setWidth("190");
            dhxLayout.cells("a").fixSize(true,true);
            
            dhxLayout.cells("a").hideHeader();
            //dhxLayout.cells("b").setWidth("710");
            tabbar=dhxLayout.cells("b").attachTabbar();
            
            //tabbar=new dhtmlXTabBar("a_tabbar","top");
tabbar.setImagePath("dhtmlx_pro_full/imgs/");
            tabbar.addTab("EQ","Equity","100px");
tabbar.addTab("FI","Fixed Income","100px");
tabbar.setTabActive("EQ");
            tabbar.setOnSelectHandler(reloadTab);
tabbar.setContent("EQ","eqgridbox");
tabbar.setContent("FI","figridbox");


            eqInvGroupGrid = new dhtmlXGridObject('eqgridbox');
            eqInvGroupGrid.setImagePath("dhtmlx_pro_full/imgs/");
            eqInvGroupGrid.setHeader("Inv Class Code,Inv Class Name,Products,#cspan,Portfolios,#cspan,Benchmarks,#cspan");
            eqInvGroupGrid.attachHeader("#rspan,#rspan,Approved,Unapproved,Approved,Unapproved,Approved,Unapproved");
            eqInvGroupGrid.setInitWidths("70,*,80,80,80,80,80,80");
            eqInvGroupGrid.enableAutoHeight(true,"350");
            eqInvGroupGrid.setSizes();
            eqInvGroupGrid.setColAlign("left,left,right,right,right,right,right,right");
            eqInvGroupGrid.setColSorting("str,str,str,str,str,str,str,str,str");
            eqInvGroupGrid.setColTypes("ro,ro,ro,ro,ro,ro,ro,ro");
            eqInvGroupGrid.setSkin("light");
            eqInvGroupGrid.attachFooter("Total ,#cspan,#stat_total,#stat_total,#stat_total,#stat_total,#stat_total,#stat_total");
            eqInvGroupGrid.init();
         eqInvGroupGrid.attachEvent("onXLS",displayLoading);
         eqInvGroupGrid.attachEvent("onXLE",displayStatus);
         eqInvGroupGrid.loadXML(getUrl("EQ",document.getElementById('calInput1').value));
            
            
            fiInvGroupGrid = new dhtmlXGridObject('figridbox');
            fiInvGroupGrid.setImagePath("dhtmlx_pro_full/imgs/");
            fiInvGroupGrid.setHeader("Inv Class Code,Inv Class Name,Products,#cspan,Portfolios,#cspan,Benchmarks,#cspan");
            fiInvGroupGrid.attachHeader("#rspan,#rspan,Approved,Unapproved,Approved,Unapproved,Approved,Unapproved");
            fiInvGroupGrid.setInitWidths("70,*,80,80,80,80,80,80");
            fiInvGroupGrid.enableAutoHeight(true,"350");
            fiInvGroupGrid.setSizes();
            fiInvGroupGrid.setColAlign("left,left,right,right,right,right,right,right");
            fiInvGroupGrid.setColSorting("str,str,str,str,str,str,str,str,str");
            fiInvGroupGrid.setColTypes("ro,ro,ro,ro,ro,ro,ro,ro");
            fiInvGroupGrid.setSkin("light");
            fiInvGroupGrid.attachFooter("Total ,#cspan,#stat_total,#stat_total,#stat_total,#stat_total,#stat_total,#stat_total");
            fiInvGroupGrid.init();
            fiInvGroupGrid.attachEvent("onXLE",displayStatus);
         fiInvGroupGrid.loadXML(getUrl("FI",document.getElementById('calInput1').value));
            
            }
            
         function reloadTab(idn,ido){
                 reloadGrid(idn,document.getElementById('calInput1').value);
                 return true;
};


        
        function displayLoading(grid) {
     statusBar.setText("<p style=\"color:blue\"> Fetching data .......</p>");
     //document.getElementById("gridstatus").innerHTML = "<p style=\"color:blue\"> Fetching data .......</p>";
     }
     function displayStatus(grid,cnt) {
     statusBar.setText(grid.getRowsNum()+" records found");
     //document.getElementById("gridstatus").innerHTML = grid.getRowsNum()+" records found";
     }
    
        function reloadGrid(grp,dateStr){
            // alert('reload with '+grp+" "+dateStr);
             if ( grp=='EQ') {
                 eqInvGroupGrid.clearAndLoad(getUrl(grp,dateStr));
             }    
             if ( grp=='FI') {
             fiInvGroupGrid.clearAndLoad(getUrl(grp,dateStr));
             }    
            
                     
        }
        function getUrl(grp,dateStr) {
            return "invCodeGroupingXML.jsp?group="+grp+"&anlysDate="+dateStr+"&un="+Date.parse(new Date());
        }
    </script>
</head>

<body onload="doOnLoad()" style="margin:1px;">
<div id="parentId" style="width:95%; height:474px;margin-left:0px;margin-top:1px;"></div>
<div id="caldate" style="margin:5px;">
<span style="font-family: verdana,arial,helvetica,sans-serif;font-size:10pt;">Analysis Date </span><br><input type="text" id="calInput1" size="12" style="color: navy; font-size:14px; font-family: Verdana; text-align:center; border: 1px solid navy" readonly="true" value='<%=DateUtil.getDateString(new Date())%>' />
</div><div id="gridstatus" ></div>
<table style="display:none;">
<tr>
<td valign="top">
</td>
<td style="width:703px; height:444px;" valign="top">
<div id="a_tabbar" style="width:703px; height:444px;"></div>
</td>
<td style="width:703px; height:444px;" valign="top">
<div id='eqgridbox' style="width:700px;height:490px;margin-top:00px;margin-bottom:00px;"></div>
</td>
<td style="width:703px; height:444px;" valign="top">
<div id='figridbox' style="width:700px;height:490px;margin-top:00px;margin-bottom:00px;"></div>
</td></tr>
<tr><td></td><td colspan="3"></td></tr>
</table>


<script>
cal1 = new dhtmlxCalendarObject('caldate',true);    
//cal1.setImagePath("dhtmlx_pro_full/imgs/");
cal1.setDateFormat("%m/%d/%Y");
cal1.setDate(anlysDate);
cal1.setInsensitiveDates("6,0");
cal1.setSensitive(new Date('06/23/2009'),new Date('07/01/2009'));
cal1.attachEvent("onClick",mSelectDate);
cal1.draw();

    function mSelectDate(date) {
         var dateStr = cal1.getFormatedDate("%m/%d/%Y",date);
         document.getElementById('calInput1').value = dateStr;
         //alert(dateStr+" "+tabbar.getActiveTab());
         reloadGrid(tabbar.getActiveTab(),dateStr);
         return true;
    }
</script>
</body>
</html>
Answer posted by Alex (support) on Jul 06, 2009 01:49

Hello,

the issue wasn't reproduced locally. Sample is sent by email.

Answer posted by VS on Jul 06, 2009 06:09

I was able to reproduce the issue with the version dhtmlxSuite_2009Rel1_pro_90226 we are using. If you have a later version available that fixes it , please forward it to me.

To reproduce, please replace all the individual includes with just this

<link rel="STYLESHEET" type="text/css" href="dhtmlx_pro_full/dhtmlx.css">

<script src="dhtmlx_pro_full/dhtmlx.js"></script>

Answer posted by Alex (support) on Jul 06, 2009 07:37
The answer with attachments are sent by email.