Friday, March 20, 2009

How to merge cells with equal values in the GridView


My solution is not the first; however, I think, it is rather universal and very short - less than 20 lines of the code.

The algorithm is simple: to bypass all the rows, starting from the second at the bottom, to the top. If a cell value is the same as a value in the previous (lower) row, then increase RowSpan and make the lower cell invisible, and so forth.

The code that merges the cells is very short:
public class GridDecorator
{
    public static void MergeRows(GridView gridView)
    {
        for (int rowIndex = gridView.Rows.Count - 2; rowIndex >= 0; rowIndex--)
        {
            GridViewRow row = gridView.Rows[rowIndex];
            GridViewRow previousRow = gridView.Rows[rowIndex + 1];

            for (int i = 0; i < row.Cells.Count; i++)
            {
                if (row.Cells[i].Text == previousRow.Cells[i].Text)
                {
                    row.Cells[i].RowSpan = previousRow.Cells[i].RowSpan < 2 ? 2 : 
                                           previousRow.Cells[i].RowSpan + 1;
                    previousRow.Cells[i].Visible = false;
                }
            }
        }
    }
}

The last action is to add an OnPreRender event handler for the GridView:
protected void gridView_PreRender(object sender, EventArgs e)
{
    GridDecorator.MergeRows(gridView);
}

Download example

Download example for template field

10 comments:

  1. Hello.
    I have one question. What do " < 2 ? 2 : " it mean?
    Thank you.

    ReplyDelete
    Replies
    1. It's an old question but in case of someone go here....

      It's a ternary condition... {condtion} ? {Result if true}:{Result if false};
      For example here : "previousRow.Cells[i].RowSpan < 2 ? 2 : previousRow.Cells[i].RowSpan + 1"
      means :
      if(previousRow.Cells[i].RowSpan < 2 )
      row.Cells[i].RowSpan = 2;
      else
      row.Cells[i].RowSpan = previousRow.Cells[i].RowSpan + 1;

      Delete
  2. This comment has been removed by a blog administrator.

    ReplyDelete
  3. can you please make Paging for this gridview. and merged column records should not split into next page

    ReplyDelete
  4. Hi MARSS. I need to merge cells that contain the same data horizontally on a gridview using asp .net. Can you help me? I trying using columnspan property but i have some issues.

    ReplyDelete
  5. i have used templatefield in my gridview . It is showing me only first row. could you help me?

    ReplyDelete
    Replies
    1. In case of templatefield row.Cells[i].Text does not work. You should use something like this:
      ((Label)row.Cells[cellIndex].FindControl("Label1")).Text

      I attached an example to the article.

      Delete
  6. HI
    I have developed merge cells in repeater.. so can you help me please?

    ReplyDelete
  7. how can i do it in windows form for vb.net

    ReplyDelete
  8. Can u please help me in applying pagination and sorting method for this merged gridview

    ReplyDelete