Start Building Professional
Web Apps Today

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);