SubGrid: Resizing and changing skin


I am using DHTMXL Pro version 1.6. I have a grid loaded via XML and the first column of the grid is of type ‘sub_grid_row’. The sub grid is also loaded as XML and it works fine. There are 2 issues which I am facing regarding the use of sub grids.

1. After open one instance of it, say in row 3, if I open up the one in row 2, the sub grid in row 3 gets ‘pushed down’. If I collapse row # 3 and then re-open it, it opens fine.

Below is the init and loading code for the parent grid:

function initKeyIndicatorLinksGrid( editMode )


            keyIndicatorLinksGrid = new dhtmlXGridObject(‘kiLinksGridBox’);






            keyIndicatorLinksGrid.enableLightMouseNavigation( true );

            //keyIndicatorLinksGrid.enableColumnMove( false );


            keyIndicatorLinksGrid.attachEvent(“onEditCell”, doOnEditCellHandler );

            keyIndicatorLinksGrid.attachEvent(“onSubGridCreated”, doOnKeyIndDetailsSubGridCreated );

            keyIndicatorLinksGrid.attachEvent(“onSubGridLoaded”, doOnKeyIndDetailsSubGridLoaded );

            keyIndicatorLinksGrid.attachEvent(“onSubRowOpen”, doOnSubRowOpen );




        function loadKeyIndicatorLinksGrid() {

            keyIndicatorLinksGrid.clearAll( true );

            keyIndicatorLinksGrid.loadXML( ‘keyIndicatorLinks.xml’, doPostLoadKeyIndicatorLinksGrid );


Below is the ‘onSubGridCreated’ event handler:

var keyIndDetailsSubGrid = null;

        function doOnKeyIndDetailsSubGridCreated(subGrid, rowId, rowIndex, value) {

            // subGrid - sub grid object

            // rowId - related row id

            // rowIndex - related row index

            // value - value of sub row grid cell in the parent grid.

             //alert(‘In On Sub Grid Created:’ + value );

            keyIndDetailsSubGrid = subGrid;



            //keyIndDetailsSubGrid.enableAutoHeight( true );

            //keyIndDetailsSubGrid.enableAutoWidth( true );

            keyIndDetailsSubGrid.enableLightMouseNavigation( true );


            //keyIndDetailsSubGrid.attachEvent(“onSubGridCreated”, doOnKeyIndAssociationsSubGridCreated );


            keyIndDetailsSubGrid.loadXML( “keyIndicatorThresholds.xml”, doPostKeyIndDetailsSubGridLoad );

            var timeoutId = window.setTimeout(function(){





            return false; //block default logic


        function doPostKeyIndDetailsSubGridLoad() {


            adjustGridSize( keyIndDetailsSubGrid );


Below is the code for ‘adjustGridSize’ (solution suggested by Support for making scroll bars around the grid go away).

function adjustGridSize( grid )


     if (null != grid)







2. The other configuration that I want to do is have the sub grid use a different ‘theme’ than the parent grid. I did set this in JS using ‘setSkin’ but it didn’t work. I also tried adding the ‘beforeInit’ in the XML for the subgrid but that didn’t work either. Below is the XML for the sub grid:









    <column width=“30”        type=“sub_row_grid”    align=“left”     sort=“na” >

    <column width=“28”        type=“cntr”        align=“center”     sort=“na” ><![CDATA[No.]]>

    <column width=“125”        type=“ro”        align=“center”     sort=“sortByEventDisplayID” ><![CDATA[Threshold ]]>


    <column width=“612”        type=“ro”        align=“left”     sort=“str” ><![CDATA[Action]]>




     4 OR < 2]]>



     <![CDATA[Add Row Delete Row]]>

Thanx for your help !!!

  1. This issue was fixed at the latest dhtmlxGrid version. Please contact … ndex.shtml

If I upgrade to the latest version of the grid, can i just update the ‘dhtmlxgrid_excell_sub_row.js’ file ? Reason I ask is becox there were updates provided for prior requests which were incroporated into ‘dhtmlxgrid.js’ and I am afraid they may be lost if I were to upgrage the whole package.

There was quite a lot of changes between 1.6 and 2.1 versions.
Updated dhtmlxgrid_excell_sub_row.js sent by email, please try to use it instead of original one, most probably it will be able to work correctly with other grid 1.6 files.