How to Marge Gridview adjacent cells depending on cells value in ASP.NET

Introduction

In this post I am explain How to Marge Gridview adjacent cells depending on cells value in ASP.NET
My previous post was : How to group columns in gridview header row in ASP.NET (programmer friendly way)

Steps :

Step - 1 : Create New Project.

Go to File > New > Project > Select asp.net web forms application > Entry Application Name > Click OK.

Step-2: Add a Database.

Go to Solution Explorer > Right Click on App_Data folder > Add > New item > Select SQL Server Database Under Data > Enter Database name > Add.

Step-3: Create table for fetch data.

Open Database > Right Click on Table > Add New Table > Add Columns > Save > Enter table name > Ok.
In this example, I have used one tables as below

Step-4: Add Entity Data Model.

Go to Solution Explorer > Right Click on Project name form Solution Explorer > Add > New item > Select ADO.net Entity Data Model under data > Enter model name > Add.
A popup window will come (Entity Data Model Wizard) > Select Generate from database > Next >
Chose your data connection > select your database > next > Select tables > enter Model Namespace > Finish.

Step-5: Add a Webpage and Design for Show Data in Gridview With Merged two or more adjacent cells

Go to Solution Explorer > Right Click on Project name form Solution Explorer > Add > New item > Select web form/ web form using master page under Web > Enter page name > Add.

HTML Code

     
    <h3>Merge adjacent cells in Gridview depanding on Cells value in ASP.NET </h3><br />
    <asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="false"  CellPadding="5"
        BackColor="#ffffff" HeaderStyle-BackColor="#f3f3f3" OnDataBound="GridView1_DataBound">
        <Columns>
            <asp:BoundField HeaderText="Country" DataField="Country" />
            <asp:BoundField HeaderText="State / Zone" DataField="State" />
            <asp:BoundField HeaderText="City" DataField="City" />
        </Columns>
    </asp:GridView>

Step-6: Write following code in Page_Load event for Show data in Gridview With Merged two or more adjacent cells.

        
       protected void Page_Load(object sender, EventArgs e)
        {
            if (!IsPostBack)
            {
                PopulateData();
            }
        }

and here is the function...

            
       private void PopulateData()
        {
            // Populate Data from Server and show in Gridview
            List allCity = new List();
            using (MyDatabaseEntities dc = new MyDatabaseEntities())
            {
                // Here order by is very required for merge gridview cell based on value in database query
                allCity = dc.CityMasters.OrderBy(a => a.Country).ThenBy(a => a.State).ThenBy(a => a.City).ToList();
                //Here thenby is used for sort as first based on country then by state and then city

                GridView1.DataSource = allCity;
                GridView1.DataBind();

            }
        }

Step-7: Write following code in GridView1_DataBound event for Merge gridview cells depending on its value .

Here for merge gridview cells I have used GridView1_DataBound event. This event is very suitable for this purpose as its fired after data binding complete.

        
     // Here this event I have used for merge cells as This event is fired after complete data binding
        protected void GridView1_DataBound(object sender, EventArgs e)
        {
            for (int rowIndex = GridView1.Rows.Count -2 ; rowIndex >= 0; rowIndex--)
            {
                GridViewRow gvRow = GridView1.Rows[rowIndex];
                GridViewRow gvNextRow = GridView1.Rows[rowIndex + 1];

                // compare cell value if found duplicate value then marge cell 
                for (int cellIndex = 0; cellIndex < gvRow.Cells.Count; cellIndex++)
                {
                    if (gvRow.Cells[cellIndex].Text == gvNextRow.Cells[cellIndex].Text)
                    {
                        if (gvNextRow.Cells[cellIndex].RowSpan < 2)
                        {
                            gvRow.Cells[cellIndex].RowSpan = 2;
                        }
                        else
                        {
                            gvRow.Cells[cellIndex].RowSpan = gvNextRow.Cells[cellIndex].RowSpan + 1;
                        }
                        gvNextRow.Cells[cellIndex].Visible = false;
                    }
                }
            }
        }

Step-8: Run Application.

Related Post: