Smart Rendering with sub grid

I am using sub grids and I have successfully added smart rendering to the sub grid, but I am having problems with resizing the row in the parent grid that was used to create the sub grid. It seems that the parent row resizes to the height of the sub grid as if the sub grid had loaded all its row at one time, but the sub grid is actually much smaller (400px) since auto height is enabled on the sub grid.



I normally have been able to resize the parent grid after the sub grid is loaded (because of your help) using subGridObj.parentGrid.callEvent(“onGridReconstructed”,[]);, but it seems to not work when smart rendering is enabled on the sub grid. It seems that enabling auto height has something to do with this. So any solutions on how to resize the parent row/grid? I am NOT using the 2.0 dhtmlxGrid, but the previous version of dhtmlxGrid instead. Thanks again for your help!



function doInitGrid()

{

    mygrid = new dhtmlXGridObject(‘cm_manufacturers’);            

            

    mygrid.setImagePath(“source/codebase/imgs/”);



    mygrid.setHeader(“img:[export_button.jpg],Manufacturer”);

        

    mygrid.setInitWidths(“45,1320”);

        

    mygrid.setColAlign(“center,left”);

        

    mygrid.setSkin(“modern”);

            

    // sort the first column as string (str) and the second and third as number (int)

    mygrid.setColSorting(“server,server”);

            

    // set column and edit types – str type won’t export, must be ro (read-only)

    mygrid.setColTypes(“sub_row,ro”);            

            

    mygrid.init();

        

    mygrid.enableSmartRendering(true);

            

    mygrid.attachEvent(“onBeforeSorting”,sortGridOnServer);            

            

    mygrid.attachEvent(“onSubGridCreated”,doInitManufItems);    

            

    mygrid.loadXML(gridQString );    

            

    // CSV EXPORTING

    // Adding on click event to first header cell

    mygrid.hdr.rows[1].cells[0].onclick=function(e){

            (e||event).cancelBubble=true; // block sort click event for 1st header row and first cell             

            showWindow(mygrid, ‘Manufacturer\n’); // Must espcape the

    };

}

        

function sortGridOnServer(ind,type,direct){

mygrid.clearAll();

mygrid.loadXML(gridQString+(gridQString.indexOf("?")>=0?"&":"?")+“orderby=”+ind+"&direct="+direct);

mygrid.setSortImgState(true,ind,direct);



return false;

}



// Manufacturer Items

function doInitManufItems(subGridObj,rowId,rowIndex) {



var subGridQString = “getManufItems.php”;



subGridObj.setImagePath(“source/codebase/imgs/”);



subGridObj.setHeader(“img:[export_button.jpg],Manufacturer,Part Number,Full Description,Pkg String”);

    

     subGridObj.setInitWidths(“45,200,200,*,200”);

    

     subGridObj.setColAlign(“center,left,center,left,center”);

    

     subGridObj.setSkin(“modern”);

        

     // sort the first column as string (str) and the second and third as number (int)

     subGridObj.setColSorting(“server,server,server,server,server”);

        

     // set column and edit types – str type won’t export, must be ro (read-only)

     subGridObj.setColTypes(“sub_row,ro,ro,ro,ro”);

        

     // enabling auto resizing on subgrid because when using smart rendering, the subgrid must be a specific size in order for scrolling to initialize to bring back records incrementally

     subGridObj.enableAutoHeight(true, ‘400’);

    

     subGridObj.init();

        

     subGridObj.enableSmartRendering(true);

        

subGridObj.attachEvent(“onBeforeSorting”,function(ind,type,direct){

     this.clearAll(); // clear grid

                this.loadXML(subGridQString+(subGridQString.indexOf("?")>=0?"&":"?")+“orderby=”+ind+"&direct="+direct+"&ManufId="+rowId); //load a new dataset from the server, with necessary order                

                this.setSortImgState(true,ind,direct); //set a correct sorting image            

                

                return false;

            });

            

            subGridObj.attachEvent(“onSubGridCreated”,doInitSuppItems);                    



subGridObj.loadXML(subGridQString + “?ManufId=” + escape(rowId),function(){             

            // Resizing self             

            subGridObj.callEvent(“onGridReconstructed”,[]);             

            });

            

            // CSV EXPORTING

            // Adding on click event to first header cell

            subGridObj.hdr.rows[1].cells[0].onclick=function(e){

            (e||event).cancelBubble=true; // block sort click event for 1st header row and first cell

            showWindow(subGridObj, ‘Manufacturer\tPartNumber\tFull Description\tPkg String\n’); // Must espcape the

        };

}

When subgrid autosized it uses the full height of data part. In your case subgrid has pretty big size, but visible parts limited to 400px because of assigned limitation, but code still uses full height which results in incorrect view.

You can try to do next mofidification in dhtmlxgrid_excell_sub_row.js, line 199
td._sub_grid.attachEvent(“onGridReconstructed”,function(){
that._detectHeight(d,td,td._sub_grid.objBox.scrollHeight+td._sub_grid.hdr.offsetHeight);
replace with
td._sub_grid.attachEvent(“onGridReconstructed”,function(){
that._detectHeight(d,td,Math.min(td._sub_grid.objBox.scrollHeight,(this._ahgrM||Infinite))+td._sub_grid.hdr.offsetHeight);