Start Building Professional
Web Apps Today

Dynamically inserting columns with attached header to a grid

Hi,

I want to dynamically insert columns to the grid and each column that I add have two standard sub headers. I am able to add a column dynamically but I don't know how to add the sub header using the grid.attachHeader(...) to the column added.

The piece of code below shows only one sub-header under each column, but I want to show two sub-header under each column that i have added,

----

for(int m=0;m<arrUnitList.length;m++)
        {
            String unitIdKey = (String) arrUnitList[m];
            Hashtable deptHash = (Hashtable) earnCodeHash.get(unitIdKey);
            Set deptKeys = deptHash.keySet();
            Object[] arrDeptList = deptKeys.toArray();            
        %>            
            <div id="div_1_<%=m%>"></div>
            <script>
                var gS = "div_1_<%=m%>";
                mygrid_1_<%=m%> = new dhtmlXGridObject(gS);
                mygrid_1_<%=m%>.imgURL = "<%=appName%>/images/";
                mygrid_1_<%=m%>.setHeader('Pay Category,Total Hrs,Total Cost');                
                mygrid_1_<%=m%>.setInitWidthsP('20,5,5');
                mygrid_1_<%=m%>.setSkin("light");
                mygrid_1_<%=m%>.setColAlign('left,right,right');
                mygrid_1_<%=m%>.setColVAlign('middle,middle,middle');
                mygrid_1_<%=m%>.setColSorting('na,na,na');
                mygrid_1_<%=m%>.setColTypes('ro,ro,ro');
                mygrid_1_<%=m%>.enableAutoHeigth(true);
                mygrid_1_<%=m%>.enableColumnAutoSize(false);
                mygrid_1_<%=m%>.init();        
                
                var strAttachHeader = "#rspan,#rspan,#rspan";                
                <%for(int n=0;n<arrDeptList.length;n++)
                {
                    String deptIdKey = (String) arrDeptList[n];
                    Hashtable payCatHash = (Hashtable) deptHash.get(deptIdKey);
                    String deptName = (String) deptMap.get(deptIdKey);                    
                %>                    
                    mygrid_1_<%=m%>.insertColumn(mygrid_1_<%=m%>.getColumnsNum()+1,'<%=deptName%>','ro','250','na','right','middle',true,'white');            
                    strAttachHeader += ",Hrs,Cost";    
                <%}%>                                
                    mygrid_1_<%=m%>.attachHeader(strAttachHeader);                                                                                
                    
            </script>        
        <%
        }

---

Pls help me solving this issue,

Sandra

The columns added to the grid will have the same count of rows in header as existing grid has. 
So you need to have the header with two additional lines in header ( which can be combined by rowspans ) - in such case newly added column will have necessary column count. 

Can you be more specific. Or if possible can you provide some sample code for this.

 mygrid.init();
 mygrid.insertColumn(8,"text 1","ro",100)
 mygrid.attachHeader("#rspan,#rspan,#rspan,#rspan,#rspan,#rspan,#rspan,#rspan,text3");
 mygrid.attachHeader("#rspan,#rspan,#rspan,#rspan,#rspan,#rspan,#rspan,#rspan,text2");

Hi,

I don't want two sub-header columns (text 2, text 3) one below the other which is below the main header column(text 1). What I need is 'text 1' column divided into 'text 2' and 'text 3'.
And this main header column like 'text 1' should be dynamically inserted into the grid and can be inserted 'n' number of times.

Awaiting for your response.

To achieve such effect you will need to create a colspan in top header row, but in not possible to include column in top level colspan by insertColumn operation. 
The only way to achieve such usecase - create grid with necessary configuration by grid.setHeader(...) 

http://dhtmlx.com/docs/products/dhtmlxGrid/doc/articles/Headers_and_footers.html#grid_art_hdrftr