Row and Column Span

Miscellaneous ››
Parent Previous Next

The grid supports row and column spans inherently. Basically, the grid has two callback functions, rowSpanFunction and colSpanFunction.


The rowSpanFunction is a function that takes in a data object, and a column, and returns a number. -1 indicates that the row should span the entire height of the grid.1 indicates the cell should occupy just its own spot. Any number greater than one would position the cell so it covers the width of that number of cells. Please note, row spans and col spans are only supported for data rows.


The colSpanFunction is a function that takes in a data object, and a column, and returns a number. -1 indicates that the row should span the entire width of the grid. Please note, rowspans and col spans are only supported for data rows. Any number greater than one would position the cell so it covers the height of that number of cells. Since this function is defined on the grid, it will get a IFlexDataGridCell object that you should use to return a colSpan.



This is what a grid with Row Span looks like:




This is what a grid with column span looks like:




Lets take a quick look at the markup:


myCompanyNameSpace.SAMPLE_CONFIGS["RowSpanColSpan"]='<grid fontFamily="tahoma" fontSize="11"  id="grid" enableDynamicLevels="true" rowSpanFunction="myCompanyNameSpace.rowSpanColSpan_getRowSpan" colSpanFunction="myCompanyNameSpace.rowSpanColSpan_getColSpan" enableDefaultDisclosureIcon="false"'+

   '                                   preferencePersistenceKey="rowSpanColSpan" on'+flexiciousNmsp.Constants.EVENT_CREATION_COMPLETE+'="myCompanyNameSpace.rowSpanColSpan_CreationComplete"'+

   '                                                                         cellBackgroundColorFunction="myCompanyNameSpace.rowSpanColSpan_getColor" horizontalGridLines="true"'+

   '                                                                         alternatingItemColors="[0xFFFFFF,0xE7F3FF]"  headerColors="[0x298EBD,0x298EBD]"  headerRollOverColors="[0x298EBD,0x298EBD]"'+

   '                                                                         columnGroupColors="[0x298EBD,0x298EBD]"  footerColors="[0x298EBD,0x298EBD]" headerStyleName="whiteText" footerStyleName="whiteText" columnGroupStyleName="whiteText"  '+

   '                                                                         footerRollOverColors="[0x298EBD,0x298EBD]" lockedSeperatorThickness="1" lockedSeperatorColor="0x6f6f6f" >'+

   '          <level childrenField="answers" enableFooters="true" >'+

   '                                <columns>'+

   '                                        <column columnTextColor="0x17365D" id="questionColumn" width="200" columnWidthMode="fixed" headerText="Survey Question" dataField="question" wordWrap="true" enableExpandCollapseIcon="true" paddingLeft="20" expandCollapseIconTop="4" expandCollapseIconLeft="4"/>'+

   '                                        <column width="150" headerText="Answer" dataField="answerOption"/>'+

   '                                        <columnGroup headerText="Freshman">'+

   '                                                <columns>'+

   '                                                        <column dataField="freshmanCount" headerText="Count" footerOperation="sum" footerOperationPrecision="0" textAlign="right"        headerAlign="right" footerAlign="right" paddingRight="5"/>'+

   '                                                        <column dataField="freshmanPercent" headerText="Percent"  footerOperationPrecision="0" textAlign="right" headerAlign="right" footerAlign="right" paddingRight="5"/>'+

   '                                                </columns>'+

   '                                        </columnGroup>'+

   '                                        <columnGroup headerText="Sophomore">'+

   '                                                <columns>'+

   '                                                        <column dataField="sophomoreCount" headerText="Count" footerOperation="sum" footerOperationPrecision="0" textAlign="right" headerAlign="right" footerAlign="right" paddingRight="5"/>'+

   '                                                        <column dataField="sophomorePercent" headerText="Percent"  footerOperationPrecision="0" textAlign="right" headerAlign="right" footerAlign="right" paddingRight="5"/>'+

   '                                                </columns>'+

   '                                        </columnGroup>'+

   '                                        <columnGroup headerText="Junior">'+

   '                                                <columns>'+

   '                                                        <column dataField="juniorCount" headerText="Count" footerOperation="sum" footerOperationPrecision="0" textAlign="right" headerAlign="right" footerAlign="right"  paddingRight="5"/>'+

   '                                                        <column dataField="juniorPercent" headerText="Percent"  footerOperationPrecision="0" textAlign="right" headerAlign="right" footerAlign="right" paddingRight="5"/>'+

   '                                                </columns>'+

   '                                        </columnGroup>'+

   '                                        <columnGroup headerText="Senior">'+

   '                                                <columns>'+

   '                                                        <column dataField="seniorCount" headerText="Count" footerOperation="sum" footerOperationPrecision="0" textAlign="right" headerAlign="right" footerAlign="right" paddingRight="5"/>'+

   '                                                        <column dataField="seniorPercent" headerText="Percent"  footerOperationPrecision="0" textAlign="right" headerAlign="right" footerAlign="right" paddingRight="5"/>'+

   '                                                </columns>'+

   '                                        </columnGroup>'+

   '                                        <columnGroup headerText="Total">'+

   '                                                <columns>'+

   '                                                        <column dataField="totalCount" headerText="Count" footerOperation="sum" footerOperationPrecision="0" textAlign="right" headerAlign="right" footerAlign="right" paddingRight="5"/>'+

   '                                                        <column dataField="totalPercent" headerText="Percent"  footerOperationPrecision="0" textAlign="right" headerAlign="right" footerAlign="right" paddingRight="5"/>'+

   '                                                </columns>'+

   '                                        </columnGroup>'+

   '                                </columns>'+

   '                        </level>'+

   '        </grid>';




myCompanyNameSpace.rowSpanColSpan_getRowSpan=function (cell){


   if(!myCompanyNameSpace.rowSpanColSpan_rbnRowSpanselected) return 1;

   if(cell.getLevel().getNestDepth()==1 //top level

       && cell.getLevel().isItemOpen(cell.rowInfo.getData())//item is open

       && cell.getColumn()

       && cell.getColumn().getDataField()=="question" //its the first column

       && cell.getRowInfo().getIsDataRow() //its the data row, not the header or the footer row

       && !cell.getRowInfo().getIsFillRow()//since the filler is also considered a data row

       )

       return cell.getRowInfo().getData().answers.length+1;


   return 1;


};

myCompanyNameSpace.rowSpanColSpan_rbnColSpanselected=false;

myCompanyNameSpace.rowSpanColSpan_getColSpan=function (cell){


   if(!myCompanyNameSpace.rowSpanColSpan_rbnColSpanselected) return 1;

   if(cell.getLevel().getNestDepth()==1 //top level

       && cell.getColumn()

       && cell.getColumn().getDataField()=="question" //its the first column

       && cell.getRowInfo().getIsDataRow() //its the data row, not the header or the footer row

       && !cell.getRowInfo().getIsFillRow()//since the filler is also considered a data row

       )

       return cell.getGrid().getColumns().length;

   return 1;

};


For a running version of this example, please refer :

http://www.htmltreegrid.com/demo/prod_ext_treegrid.html?example=Row%20Span%20Col%20Span