Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

GridView with merged cells

I need to display data in grid view with merged rows for some columns. Please help me to prepare a grid view in below defined format: enter image description here

And the original data comes from database is in below format: enter image description here

Please help me to find best way for doing this task dynamically and efficiently.

like image 637
himanshu Avatar asked Apr 22 '13 13:04

himanshu


People also ask

How to merge GridView cells in vb net?

In this article we will be able to merge GridView cells ,columns in GridView rows. Here in DataBound Event of the GridView control we count total number of rows and then checking each cells value against value of same cell in previous row and then setting the RowSpan of cells.

How do I merge rows in grid?

To enable cell merging, set the allowMerging property to indicate what part or parts of the grid you want to merge, and set the allowMerging property on specific rows and columns to true. Once you do that, the grid will merges cells that have the same content, grouping the data visually.

Which property you will use to merge cells horizontally in grid?

There are two methods setting horizontally merging. The first is using CTHMerge which is similar to the vertically merging using CTVMerge and it does not explicitly need a table grid. The second is using grid span properties.


2 Answers

You will have to use RowSpan.

Refer following code for it:

protected void GridView1_DataBound1(object sender, EventArgs e)
{
  for (int rowIndex = GridView1.Rows.Count - 2;
                                     rowIndex >= 0; rowIndex--)
  {
    GridViewRow gvRow = GridView1.Rows[rowIndex];
    GridViewRow gvPreviousRow = GridView1.Rows[rowIndex + 1];
    for (int cellCount = 0; cellCount < gvRow.Cells.Count;
                                                  cellCount++)
    {
     if (gvRow.Cells[cellCount].Text ==
                            gvPreviousRow.Cells[cellCount].Text)
     {
       if (gvPreviousRow.Cells[cellCount].RowSpan < 2)
       {
         gvRow.Cells[cellCount].RowSpan = 2;
       }
       else
       {
        gvRow.Cells[cellCount].RowSpan =
            gvPreviousRow.Cells[cellCount].RowSpan + 1;
       }
       gvPreviousRow.Cells[cellCount].Visible = false;
    }
   }
}

Referance:

https://sites.google.com/site/learning6329/asp-net/gridview-merge-cells

Pictorial Example As In Question:

http://marss.co.ua/MergingCellsInGridView.aspx

like image 116
Freelancer Avatar answered Oct 10 '22 20:10

Freelancer


Simplest way to merge Row-cells of first column is as below. Please note that For Loop is always to be iterated in reverse.

protected void GridView1_DataBound(object sender, EventArgs e)
    {
        int RowSpan = 2;
        for (int i = GridView1.Rows.Count-2; i >=0 ;i-- )
        {
            GridViewRow currRow = GridView1.Rows[i];
            GridViewRow prevRow = GridView1.Rows[i+1];
            if (currRow.Cells[0].Text == prevRow.Cells[0].Text)
            {
                currRow.Cells[0].RowSpan = RowSpan;
                prevRow.Cells[0].Visible = false;
                RowSpan += 1;
            }
            else
                RowSpan = 2;
        }
    }

If you want to merge row-cells of all columns similarly, you can use another "forloop" within outer forloop written above

like image 38
Shridhar Gowda Avatar answered Oct 10 '22 20:10

Shridhar Gowda