Start Building Professional
Web Apps Today


 
Categories Question details Back To List
Question  posted by Santosh B on Jul 14, 2009 11:36
open dhtmlx forum
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:

<rows>
<head>
    <beforeInit>
        <call command="setSkin">
            <param>modern</param>
        </call>
    </beforeInit>

<afterInit>
         <call command="enableTooltips">
             <param>false,false,false,false</param>
         </call>
</afterInit>

    <column width="30"        type="sub_row_grid"    align="left"     sort="na" ><![CDATA[]]></column>

    <column width="28"        type="cntr"        align="center"     sort="na" ><![CDATA[<Center>No.]]></column>

    <column width="125"        type="ro"        align="center"     sort="sortByEventDisplayID" ><![CDATA[<Center>Threshold ]]>
    </column>

    <column width="612"        type="ro"        align="left"     sort="str" ><![CDATA[<Center>Action]]></column>

    <settings>
        <colWidth>px</colWidth>
    </settings>
</head>

<row id="1" selected="true" call="true" >
<cell type="ch" />
<cell />
    <cell><![CDATA[> 4 OR < 2]]></cell>
<cell style="white-space: normal;" ><![CDATA[Follow-up task: Jin Kang]]></cell>
</row>
<row id="2" >
<cell type="ch" />
<cell />
    <cell><![CDATA[< 85%]]></cell>
<cell style="white-space: normal;" ><![CDATA[Notification: BRM Team]]></cell>
</row>
<row id="3">
     <userdata name="keyIndId"><![CDATA[37]]></userdata>
     <cell type="ro" colspan="4" align="left" ><![CDATA[<button id="addThrshldBtn" class="buttonClass" height="18px" >Add Row</button> <button id="delThrshldBtn" class="buttonClass" >Delete Row</button>]]></cell>
</row>
<!--
<row id="4">
     <userdata name="keyIndId"><![CDATA[37]]></userdata>
     <cell type="sub_row_grid" title="Click to view all Links for this Key Indicator" ><![CDATA[keyIndId=37]]></cell>
     <cell type="ro" colspan="3" align="left" ><![CDATA[<span class="font12PxBold" >Other Associations</span>]]></cell>
</row>
-->
</rows>

Thanx for your help !!!!
Answer posted by dhxSupport on Jul 15, 2009 04:16
1. This issue was fixed at the latest dhtmlxGrid version. Please contact sales@dhtmlx.com to update your files
2. Unfortunately there is no way to set different skin to the sub grid.
You can try to use dhtmlxTreeGrid which can more extended parent-child functionality. Please find more information here http://www.dhtmlx.com/docs/products/dhtmlxTreeGrid/index.shtml

Answer posted by Santosh B on Jul 15, 2009 07:37
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.
Answer posted by Support on Jul 15, 2009 09:37
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.