Start Building Professional
Web Apps Today

Subgrid not working

Hi,

I'm trying to create a subgrid inside a grid. I am adding the rows to the subgrid using JS like attaching an event to the main grid. But it this is not working for me. Could you please provide a solution to this.

<div id="gridbox" style='width: 100%; height: 150px;'></div>
    <script type="text/javascript">
        grid = new dhtmlXGridObject('gridbox');

        grid.imgURL = "<c:url value='/tpc/dhtmlx/dhtmlxGrid/codebase/imgs/'/>";
        grid.setHeader(",A,B,C,D");
        grid.setColAlign("center,left,center,right,left");
        grid.enableResizing("false,false,false,false,false");
        grid.setColHidden("false,false,false,false,false");
        grid.setInitWidthsP("3,*,25,15,15");
        grid.setColTypes("sub_row_grid,ro,ro,ro,ro");
        grid.setSkin("rflx");
        grid.enableAutoHeight(true);
        grid.init();    
        
        grid.addRow(1,'1,2,3,4',0);    
        grid.addRow(2,'21,22,23,24',1);    
        
        grid.attachEvent("onSubGridCreated",function(subgrid,row_id,cell_index){
            
            subgrid.setHeader("E,F,G");
            subgrid.setColAlign("left,left,right");
            subgrid.enableResizing("false,false,false");
            subgrid.setColHidden("false,false,false");
            subgrid.setInitWidthsP("*,35,15");
            subgrid.setColTypes("ro,ro,ro");
            subgrid.setSkin("blue");
            subgrid.enableAutoHeight(true);
            subgrid.init();            
            subgrid.addRow(row_id,'a,b,c');    
            
            return false;
        });
    </script>

I couldn't see the sub grid on click of the + icon, but the data is present in some random fashion without the sub-grid header. And also, the height of the sub grid row is more than the actual required height even though I have added only a single row to the sub-grid.

Hi,

Except the sub grid everything is working fine. I could not see the subgrid after clicking the + icon. Also it is giving a JS error saying 'tagName is null or not an object' dhtmlxgrid_form.js Line 23 in IE 8.
If I don't initialize the subgrid by removing the subgrid.init() then it gives no JS error.

Am I missing some dhtmlx JS and CSS files which are supposed to be included in the jsp page. Pls let me know what are the files that are actually needed in this case.

<div id="gridbox_mainGrid" style='width: 100%; height: 150px;'></div>
                        <script type="text/javascript">
                            mainGrid= new dhtmlXGridObject('gridbox_mainGrid');

                            mainGrid.imgURL = "<c:url value='/${TPC_SCRIPTS}/dhtmlx/dhtmlxGrid/codebase/imgs/'/>";
                            mainGrid.setHeader(",MainA,MainB,MainC,MainD");
                            mainGrid.setColAlign("center,left,center,right,left");
                            mainGrid.enableResizing("false,false,false,false,false");
                            mainGrid.setColHidden("false,false,false,false,false");
                            mainGrid.setInitWidthsP("3,*,25,15,15");
                            mainGrid.setColTypes("sub_row_grid,ro,ro,ro,ro");
                            mainGrid.setSkin("winxp");
                            mainGrid.enableAutoHeight(true);
                            mainGrid.init();
                            
                            mainGrid.attachEvent("onSubGridCreated",function(subgrid,row_id,cell_index){
                                alert('inside subgrid evt');
                                
                                subgrid.imgURL = "<c:url value='/${TPC_SCRIPTS}/dhtmlx/dhtmlxGrid/codebase/imgs/'/>";
                                subgrid.setHeader("ColA,ColB,ColC");                                
                                subgrid.setColAlign("center,left,right");
                                subgrid.enableResizing("false,false,false");
                                subgrid.setColHidden("false,false,false");
                                subgrid.setInitWidthsP("*,35,15");
                                subgrid.setColTypes("ro,ro,ro");
                                subgrid.setSkin("rflx");                                
                                subgrid.enableAutoHeight(true);

                                subgrid.init();                               
                                
                                return false;
                            });

</script>

Please contact support@dhtmlx.com and provide full example where we can reproduce this issue including files which you are using to initialize grid.