How to merge multiple columns values into one column? Asp.net Gridview C#

问题

First of I don't know if this is possible, the correct way to go or even will work, but I hope you guys can help me out, I will try to explain:

I have a GridView Control on the ASPX page:

<asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="True" OnRowDataBound="GridView1_RowDataBound" GridLines="None" CssClass="table table-striped" />

I created a DataTable in the code-behind which holds the following data and have bind it to the Gridview control:

-----------------------------------------
|       | Name1 | Name2 | Name3 | Name4 |
-----------------------------------------
| Row1  | 1     | 1     | 1     | 1b    |
| Row2  | 1a    | 2b    | 2b    | 4b    |
| Row3  | 2a    | 2c    | 2a    | 2a    |
| Row4  | 1d    | 1d    | 1d    | 4d    |
| Row5  | 1e    | 1e    | 1e    | 1e    |
| Row6  | 1f    | 2f    | 3f    | 4f    |
-----------------------------------------

Now I would like matching column values to be merged and add the appropriate colspan. I have added to the GridView control a OnRowDataBound as following:

protected void GridView1_RowDataBound(object sender, GridViewRowEventArgs e)
{
    if (e.Row.RowType == DataControlRowType.DataRow)
    {
        if (e.Row.RowIndex >= 0)
        {
            int colSpanValue = 2;
            for (int i = 0; i < e.Row.Cells.Count; i++)
            {
                if (i+1 < e.Row.Cells.Count) 
                {
                    if (e.Row.Cells[i].Text == e.Row.Cells[i + 1].Text)
                    {
                        e.Row.Cells[i].BackColor = Color.Beige;
                        e.Row.Cells[i].ColumnSpan = colSpanValue;
                        e.Row.Cells[i].HorizontalAlign = HorizontalAlign.Center;
                        e.Row.Cells[i + 1].Visible = false;
                        colSpanValue++;
                    }
                }
            }
        }
    }
}

so the above data would like this, something like this.

-----------------------------------------
|       | Name1 | Name2 | Name3 | Name4 |
-----------------------------------------
| Row1  |       1       | 1b            | <!-- problem
| Row2  | 1a    |      2b       | 4b    |
| Row3  | 2a    | 2c    |      2a       | <!-- problem
| Row4  |           1d          | 4d    |
| Row5  |              1e               |
| Row6  | 1f    | 2f    | 3f    | 4f    |
-----------------------------------------

Currently I managed to get this, see screenshot

However this is not really what i would like to see, but would expect as the OnRowDataBound code block is probably not done the right.

So my question is:

How could I merge all equal columns in a row and add colspan to them?
Now for the tricky bit, would I be able to sort the columns so, that matching column cells are displayed properly? (not sure about this)

So the ideal result would be like this:

-----------------------------------------
|       | Name1 | Name2 | Name3 | Name4 |
-----------------------------------------
| Row1  |           1           | 1b    | <!-- problem
| Row2  | 1a    |      2b       | 4b    |
| Row3  | 2a    | 2c    |      2a       | <!-- problem
| Row4  |           1d          | 4d    |
| Row5  |              1e               |
| Row6  | 1f    | 2f    | 3f    | 4f    |
-----------------------------------------

UPDATED INFORMATION

After updating the code according to the answers provided by ConnorsFan and fnostro, both answers are correct and work, thank you for the help. I choose for ConnorsFan's approach, as i'm still learning.

The collspan's are now correct, see screenshot below:

I will try to fnostro's advise to manage the sorting part via the DataTable and rebind the data to the GridView1 and keep you posted. once again thank you for your answers.

回答1:

You can try this:

protected void GridView1_RowDataBound(object sender, GridViewRowEventArgs e)
{
    if (e.Row.RowType == DataControlRowType.DataRow)
    {
        for (int i = 0; i < e.Row.Cells.Count - 1; i++)
        {
            TableCell cell = e.Row.Cells[i];

            if (cell.Visible)
            {
                int colSpanValue = 1;

                for (int j = i + 1; j < e.Row.Cells.Count; j++)
                {
                    TableCell otherCell = e.Row.Cells[j];

                    if (otherCell.Text == cell.Text)
                    {
                        colSpanValue++;
                        otherCell.Visible = false;
                    }
                    else
                    {
                        break;
                    }
                }

                if (colSpanValue > 1)
                {
                    cell.ColumnSpan = colSpanValue;
                    cell.BackColor = Color.Beige;
                    cell.HorizontalAlign = HorizontalAlign.Center;
                }
            }
        }
    }
}

回答2:

Regarding sorting. It's better to manage sorting in the DataTable and simply rebind to the GridView

Here is how I modified the RowDataBound Event to merge like data:

    protected void GridView1_RowDataBound( object sender, GridViewRowEventArgs e ) 
    {
      if ( e.Row.RowType == DataControlRowType.DataRow ) 
      {
        // loop through cells and track span index (si)
        for ( int i = 0, si = 0; i < e.Row.Cells.Count; si = i) 
        {
          // compare adjacent cells for like data and hide as needed
          while ( ++i < e.Row.Cells.Count && e.Row.Cells[ si ].Text == e.Row.Cells[ i ].Text )
            e.Row.Cells[ i ].Visible = false;

          // set span and, conditionally, special formatting
          if ( ( e.Row.Cells[ si ].ColumnSpan = ( i - si ) ) > 1 ) 
          {
            e.Row.Cells[ si ].BackColor = Color.Beige;
            e.Row.Cells[ si ].HorizontalAlign = HorizontalAlign.Center;
          }
        }
      }
    }

来源：https://stackoverflow.com/questions/37752266/how-to-merge-multiple-columns-values-into-one-column-asp-net-gridview-c-sharp

标签

ASP.NET

gridview