Josh Gough

HOWTO: ColSpan and RowSpan in Asp:GridView Controls

Sometimes you need to do some spanning in tables rendered as part of a GridView. I'm still not sure GridView is absolutely necessary for what I'm doing here. Perhaps the "built in sorting" capability is not all its cooked up to be and I can roll my own but in any case, here's a way to do it:



Here is the sample table to produce:

	Thumb	Title	Count	User Name	Time Left	Actions
660523	[ img ]	The title is pretty long and wraps because of that.				[actions]
			50	Bob Seller	0d56m
447993	[ img ]	The title is pretty long and wraps because of that.				[actions]
			3	Mike Seller	1d6m

In the page or control with your GridView instance, hook into the RowDataBound event:

     protected void ctlItems_RowDataBound(object sender, GridViewRowEventArgs e)
        {        
            if (e.Row.RowIndex > -1)
            {
                ctlItems.RearrangeCells(e.Row, 2);
            }
        }

The RerrangeCells method looks like:

        public void RearrangeCells(GridViewRow sourceRow, int cellIndexToStretchFrom)
        {
            GridViewRow rowToAdd = CreateRow(sourceRow.RowIndex+1
                + RearrangeCellsVisitCount, -1,
                DataControlRowType.EmptyDataRow,
                DataControlRowState.Normal);

            GridViewUtil.MakeBookendsAndStretchCell(sourceRow,
                rowToAdd, cellIndexToStretchFrom);

            HeaderRow.Parent.Controls.AddAt(sourceRow.RowIndex+1
                + RearrangeCellsVisitCount, rowToAdd);            

            // Increment the visit count 
            RearrangeCellsVisitCount++;
        }
        /// 
        /// Used to track the offset for adding rows to the grid
        /// 
        private int RearrangeCellsVisitCount = 1;

Finally, the GridViewUtil class looks as follows:

    /// 
    /// Provides helper methods for modifying the constituent TableCells of GridView rows.
    /// 
    public static class GridViewUtil
    {
        public enum SpanModiciationTypeEnum
        {
            ColumnSpan,
            RowSpan
        }

        public static void ExpandCellSpan(GridViewRow row, int[] cellIndicesToModifySpanFor,
            int spanOffset, SpanModiciationTypeEnum spanType)
        {
            foreach (int index in cellIndicesToModifySpanFor)
            {
                TableCell cell = row.Cells[index];
                switch (spanType)
                {
                    case SpanModiciationTypeEnum.ColumnSpan:
                        cell.ColumnSpan += spanOffset; 
                        break;
                    case SpanModiciationTypeEnum.RowSpan:
                        cell.RowSpan += spanOffset;
                        break;
                }
            }
        }

        public static void MoveCells(GridViewRow sourceRow, GridViewRow targetRow, int startIndex,
            int endIndex)
        {
            if (endIndex > sourceRow.Cells.Count)
            {
                throw new InvalidOperationException("MoveCells cannot execute because the sourceRow contains fewer columns than the specified endIndex: "
                     + sourceRow.Cells.Count + ", " + endIndex);
            }

            TableCell[] cells = new TableCell[endIndex - startIndex];
            int count = endIndex - startIndex;

            for (int i = 0; i 

Explanation
                
                    
	
                        posted
                        Friday, June 23, 2006 9:57 AM
						by
						JoshuaGough
                        with 
                        1 Comments