Start Building Professional
Web Apps Today


 
Categories Question details Back To List
Question  posted by Steven Lobbezoo on Jun 05, 2009 06:51
open dhtmlx forum
IE7 does not display grid headers and data in certain cases

Hi,

I have used your dhtmlxGrid in an application to test it.
It works just fine in Firefox, but i got big problems with IE 7.
In the app I use 5 grids in different div's.
3 of them are working just fine in IE7.
2 donnot display the second header row and no data (in IE7)
Because these 2 have a second header with some comboboxes for filtering in them and the other not, I thought it was just
this filtering that was the problem.
So I removed it completely.
Still : no data. (data is delivered as xml from a php file).
So I produced an error in the xml (after trying iso and utf encoding) and behold :
I get to see the second header with the comboboxes, but no data of course (error message).
I re-corrected the xml, and the situation is as before.
So I tried to read the xml directly into the browsers (IE7 and Firefox) Both render correct, no errors.
SO I installed your debug version of common, and it tells me that all xml is ok (200).

Please help, i'm out of ideas.
Thanks in advance.
Steven
Answer posted by Support on Jun 05, 2009 08:08
Please provide HTML snippet of code, used as containers for problematic grid 
The problem can be caused by absence of height styling or zero height assigned to the containers ( as result grids are not visible in such containers ) 

Also, you can try to move code , which inits grid in onLoad handler of the page ( in complex layout , sizes of container can be unclear during page rendering, in such case init after page loading may resolve problem ) 
Answer posted by Steven Lobbezoo on Jun 05, 2009 08:29
Ok, the code is here :

<div class="contentdiv">
Les réservations :

    <img id="top" src="form_general/top.png" alt="" style="width :760px;left : 10px; position : absolute; text-align : left; top : 10px;" align="left">
    <div id="reservations_grid" style="width:760px;height:360px;left : 10px; position : absolute; text-align : left; top : 30px;" align="left"></div>
    <img id="bottom" src="form_general/bottom.png" alt="" style="width :760px; position: absolute; left : 10px; top : 390px" align="left">
    <div class="appnitro" style="width :760px; position: absolute; left : 10px; top : 400px" >
        <br><br>Vous pouvez changer / enlever des données en cliquant sur la ligne correspondant, ou cliquer <input type="button" value="Nouveau" onClick="doOnRowSelected2(0)"> pour ajouter.
    </div>
    <div style="display:none">
        <div id="tit_flt_box"><select style="width:100%" id="sta_steven" onclick="(arguments[0]||window.event).cancelBubble=true;" onchange="filterBy2()"></select></div>
    </div>

    <script>
        var mrgrid = new dhtmlXGridObject('reservations_grid');

        mrgrid.setImagePath("dhtmlxGrid/dhtmlxGrid/codebase/imgs/");

        mrgrid.setHeader("No,Arrivé,Départ, Nom, Ville, #, Statut, Observations");

        mrgrid.setInitWidths("0,70,70, 120, 120, 20, 100, 260");

        mrgrid.setColAlign("center,left,left, left, left, left, left, left");

        mrgrid.setColTypes("ro,ro,ro,ro,ro,ro,ro,ro");

        mrgrid.setColSorting("server,date,date,str,str,int,str,str");

        mrgrid.setSkin("light");

        mrgrid.enableMultiline(true);

        mrgrid.attachEvent("onRowSelect",doOnRowSelected2);
        mrgrid.attachHeader("&nbsp;,&nbsp;,&nbsp;,&nbsp;,&nbsp;,&nbsp;,<div id='stat_flt'></div>,&nbsp;");

        mrgrid.init();

        mrgrid.enableSmartRendering(true);

    gridQString2 = "reservations_feed.php";//save query string to global variable (see step 5 for details)
    mrgrid.loadXML(gridQString2 , function(){
    //create second header row
    //append filter for 7rd column
        var resFlt = document.getElementById("stat_flt").appendChild(document.getElementById("tit_flt_box").childNodes[0]);
        populateSelectWithstatus(resFlt,7);
    //correct grid proportions if necessary
        mrgrid.setSizes();
    });

    //populate filter select box with possible column values
    function populateSelectWithstatus(selObj, No){
        selObj.options.add(new Option("Tous ",""))
        selObj.options.add(new Option("Demandée ","Demandée"))
        selObj.options.add(new Option("Réservée ","Réservée"))
        selObj.options.add(new Option("Attente ","Attente"))
        selObj.options.add(new Option("Loué ","Loué"))
        selObj.options.add(new Option("Annulée ","Annulée"))
    }

    //do a filtered run
    function filterBy2() {
        var F1 = document.getElementById("sta_steven").value;
        // since we donnot have a prof version, we do this ourselves (and refresh the grid)
        var what = "";
        if (F1 != "Tous" && F1 != "") {
            what = " Status = '" + F1 + "' ";
        }
        mrgrid.clearAll();
        if (what != "") {
            mrgrid.load(gridQString2 + "?where=" + encodeURI(what));
        } else {
            mrgrid.load(gridQString2);
        }
    }

    function returnReservation() {
        mrgrid.clearAll();
        mrgrid.load(gridQString2);
    }

    function doOnRowSelected2(id){
        showPopWin('editslot.php?id=' + id, 700, 500, returnReservation);
    }

    </script>


</div>

In the mean time i found out that if I click on sort (table header) one row displays,
each time an other one.

For your suggestion :
But there are grids loaded ok before this one and loaded ok after this one.
It seems to have to do with the fact that the combobox in the header is not filled (it's not in the IE7 at all)

Thanks,
Steven

Answer posted by Support on Jun 05, 2009 09:24
Please remove unnecessary whitespaces in parameters list of setInitWidths,setColAlign commands - IE may not recognize parameter value because of whitespaces around it. 

Except of it - all other looks correctly and must not cause any problems. 
Answer posted by Steven Lobbezoo on Jun 05, 2009 09:28
Wow, that was it.
All is correct now (for the time being, lets wait for murphy ;-) )

I must say : never had such a fast and usefull response to a question anywhere !

Thanks a lot,

Steven