-->

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
  1. <h3>Merge adjacent cells in Gridview depanding on Cells value in ASP.NET </h3><br />
  2. <asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="false" CellPadding="5"
  3. BackColor="#ffffff" HeaderStyle-BackColor="#f3f3f3" OnDataBound="GridView1_DataBound">
  4. <Columns>
  5. <asp:BoundField HeaderText="Country" DataField="Country" />
  6. <asp:BoundField HeaderText="State / Zone" DataField="State" />
  7. <asp:BoundField HeaderText="City" DataField="City" />
  8. </Columns>
  9. </asp:GridView>

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


  1. protected void Page_Load(object sender, EventArgs e)
  2. {
  3. if (!IsPostBack)
  4. {
  5. PopulateData();
  6. }
  7. }
and here is the function...
  1. private void PopulateData()
  2. {
  3. // Populate Data from Server and show in Gridview
  4. List allCity = new List();
  5. using (MyDatabaseEntities dc = new MyDatabaseEntities())
  6. {
  7. // Here order by is very required for merge gridview cell based on value in database query
  8. allCity = dc.CityMasters.OrderBy(a => a.Country).ThenBy(a => a.State).ThenBy(a => a.City).ToList();
  9. //Here thenby is used for sort as first based on country then by state and then city
  10. GridView1.DataSource = allCity;
  11. GridView1.DataBind();
  12. }
  13. }

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.

  1. // Here this event I have used for merge cells as This event is fired after complete data binding
  2. protected void GridView1_DataBound(object sender, EventArgs e)
  3. {
  4. for (int rowIndex = GridView1.Rows.Count -2 ; rowIndex >= 0; rowIndex--)
  5. {
  6. GridViewRow gvRow = GridView1.Rows[rowIndex];
  7. GridViewRow gvNextRow = GridView1.Rows[rowIndex + 1];
  8.  
  9. // compare cell value if found duplicate value then marge cell
  10. for (int cellIndex = 0; cellIndex < gvRow.Cells.Count; cellIndex++)
  11. {
  12. if (gvRow.Cells[cellIndex].Text == gvNextRow.Cells[cellIndex].Text)
  13. {
  14. if (gvNextRow.Cells[cellIndex].RowSpan < 2)
  15. {
  16. gvRow.Cells[cellIndex].RowSpan = 2;
  17. }
  18. else
  19. {
  20. gvRow.Cells[cellIndex].RowSpan = gvNextRow.Cells[cellIndex].RowSpan + 1;
  21. }
  22. gvNextRow.Cells[cellIndex].Visible = false;
  23. }
  24. }
  25. }
  26. }

Step-8: Run Application.



Hello ! My name is Sourav Mondal. I am a software developer working in Microsoft .NET technologies since 2010.

I like to share my working experience, research and knowledge through my site.

I love developing applications in Microsoft Technologies including Asp.Net webforms, mvc, winforms, c#.net, sql server, entity framework, Ajax, Jquery, web api, web service and more.

Related Posts: