SubGrid: Resizing and changing skin

Hi:

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.setImagePath(“thirdParty/dhtmlXTreeGridPro/imgs/”);

            keyIndicatorLinksGrid.setSkin(“light”);

            keyIndicatorLinksGrid.enableMultiselect(true);

            keyIndicatorLinksGrid.enableAutoHeight(true);

            keyIndicatorLinksGrid.enableAutoWidth(true);



            keyIndicatorLinksGrid.enableLightMouseNavigation( true );

            //keyIndicatorLinksGrid.enableColumnMove( false );

            //keyIndicatorLinksGrid.attachEvent(“onRowSelect”,doOnRowSelected);

            keyIndicatorLinksGrid.attachEvent(“onEditCell”, doOnEditCellHandler );

            keyIndicatorLinksGrid.attachEvent(“onSubGridCreated”, doOnKeyIndDetailsSubGridCreated );

            keyIndicatorLinksGrid.attachEvent(“onSubGridLoaded”, doOnKeyIndDetailsSubGridLoaded );

            keyIndicatorLinksGrid.attachEvent(“onSubRowOpen”, doOnSubRowOpen );

            

            keyIndicatorLinksGrid.init();

        }



        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.setImagePath(“thirdParty/dhtmlXTreeGridPro/imgs/”);

            keyIndDetailsSubGrid.setSkin(“modern”);

            //keyIndDetailsSubGrid.enableAutoHeight( true );

            //keyIndDetailsSubGrid.enableAutoWidth( true );

            keyIndDetailsSubGrid.enableLightMouseNavigation( true );

            keyIndDetailsSubGrid.enableCollSpan(true);

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

            keyIndDetailsSubGrid.init();



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

            var timeoutId = window.setTimeout(function(){

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

                                                },

                                             50);

        

            return false; //block default logic

        }



        function doPostKeyIndDetailsSubGridLoad() {

            //keyIndDetailsSubGrid.enableAutoHeight(true);

            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)

     {

        grid.setSizes();

        grid.obj.border=1;

        grid.obj.border=0;

     }

}





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:







    

        

            modern

        

    





        

             false,false,false,false

        





    <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]]>



    

        px

    











     4 OR < 2]]>











    







    

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









Thanx for your help !!!

  1. This issue was fixed at the latest dhtmlxGrid version. Please contact dhtmlx.com/docs/products/dht … 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.