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:


 getRowSpan(cell) {

   if (!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;

 }


 getColSpan(cell) {

   if (!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;

 }


 render() {

   return (

     <div>

       <h1 className='page-title'>Row Span and Column Span</h1>

       <FullWidthSection useContent={true}>

         <RadioButtonGroup name="pageSelection" defaultSelected={"rowSpan"} onChange={this.spanSelectHandler}>

           <RadioButton name="useRowSpan" label={"Use Row Span"} className={"flxsExportpaging RBN_CURRENT_PAGE"} value={"rowSpan"} />

           <RadioButton name="useColumnSpan" label={"Use Column Span"} className={"flxsExportpaging RBN_ALL_PAGES"} value={"columnSpan"} />

         </RadioButtonGroup>

         <ReactDataGrid width={"100%"} fontFamily="tahoma" horizontalScrollPolicy={"off"} fontSize="11" ref={(grid) => { this.grid = grid; }} enableDynamicLevels rowSpanFunction={this.getRowSpan.bind(this)} colSpanFunction={this.getColSpan.bind(this)}

           enableDefaultDisclosureIcon={false} preferencePersistenceKey="rowSpanColSpan" cellBackgroundColorFunction={this.getColor} horizontalGridLines 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" >

           <ReactDataGridColumnLevel childrenField="answers" enableFooters >

             <ReactDataGridColumn columnTextColor="0x17365D" id="questionColumn" width="200" columnWidthMode="fixed" headerText="Survey Question" dataField="question" wordWrap enableExpandCollapseIcon paddingLeft={20} expandCollapseIconTop={4} expandCollapseIconLeft={4} />

             <ReactDataGridColumn width="150" headerText="Answer" dataField="answerOption" />

             <ReactDataGridColumnGroup headerText="Freshman">

               <ReactDataGridColumn dataField="freshmanCount" headerText="Count" footerOperation="sum" footerOperationPrecision="0" textAlign="right" headerAlign="right" headerAlign="right" footerAlign="right" paddingRight={5} />

               <ReactDataGridColumn dataField="freshmanPercent" headerText="Percent" footerOperationPrecision="0" textAlign="right" headerAlign="right" headerAlign="right" footerAlign="right" paddingRight={5} />

             </ReactDataGridColumnGroup>

             <ReactDataGridColumnGroup headerText="Sophomore">

               <ReactDataGridColumn dataField="sophomoreCount" headerText="Count" footerOperation="sum" footerOperationPrecision="0" textAlign="right" headerAlign="right" headerAlign="right" footerAlign="right" paddingRight={5} />

               <ReactDataGridColumn dataField="sophomorePercent" headerText="Percent" footerOperationPrecision="0" textAlign="right" headerAlign="right" headerAlign="right" footerAlign="right" paddingRight={5} />

             </ReactDataGridColumnGroup>

             <ReactDataGridColumnGroup headerText="Junior">

               <ReactDataGridColumn dataField="juniorCount" headerText="Count" footerOperation="sum" footerOperationPrecision="0" textAlign="right" headerAlign="right" headerAlign="right" footerAlign="right" paddingRight={5} />

               <ReactDataGridColumn dataField="juniorPercent" headerText="Percent" footerOperationPrecision="0" textAlign="right" headerAlign="right" headerAlign="right" footerAlign="right" paddingRight={5} />

             </ReactDataGridColumnGroup>

             <ReactDataGridColumnGroup headerText="Senior">

               <ReactDataGridColumn dataField="seniorCount" headerText="Count" footerOperation="sum" footerOperationPrecision="0" textAlign="right" headerAlign="right" headerAlign="right" footerAlign="right" paddingRight={5} />

               <ReactDataGridColumn dataField="seniorPercent" headerText="Percent" footerOperationPrecision="0" textAlign="right" headerAlign="right" headerAlign="right" footerAlign="right" paddingRight={5} />

             </ReactDataGridColumnGroup>

             <ReactDataGridColumnGroup headerText="Total">

               <ReactDataGridColumn dataField="totalCount" headerText="Count" footerOperation="sum" footerOperationPrecision="0" textAlign="right" headerAlign="right" headerAlign="right" footerAlign="right" paddingRight={5} />

               <ReactDataGridColumn dataField="totalPercent" headerText="Percent" footerOperationPrecision="0" textAlign="right" headerAlign="right" headerAlign="right" footerAlign="right" paddingRight={5} />

             </ReactDataGridColumnGroup>

           </ReactDataGridColumnLevel>

         </ReactDataGrid>

       </FullWidthSection>

     </div>

   );

 }



For a running version of this example, please refer : http://www.reactdatagrid.com/demo/#RowSpanColSpan