Post
Ask Question

GridView Cell Merging in ASP.NET

Here we will discuss the following concepts:
  • How to bind the data to GridView using stored procedure.
  • Merge the cells in GridView.
At Database:

Create the following table in your database to demonstrate the above concepts.



Copy the following script and run in your database to create USP_GetAllEmployeesByDept stored procedure.
  1. Create procedure [dbo].[USP_GetAllEmployeesByDept]  
  2. AS  
  3. Begin  
  4. SELECT DeptID, Name, Salary   
  5. FROM Mas_Employee   
  6. GROUP BY DeptID, Name, Salary  
  7. END  
Implementation:

Create new ASP.NET Empty Web Application and give it a meaningfull name. Add one webform to your project.

In Web.config:

Make the connection string in web.Config.
  1. <connectionStrings>  
  2.    <add name="conStr" connectionString="Password = 1234; User ID=sa; Database = DB_DEV_JAI; Data Source = ."  
  3.    providerName="System.Data.SqlClient" />  
  4. </connectionStrings>  
Design Your.aspx:
 
Copy the following code in your design page. 
  1. <div>  
  2.     <asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="false" OnDataBound="OnDataBound">  
  3.         <Columns>  
  4.             <asp:BoundField DataField="DeptId" HeaderText="DeptId" ItemStyle-Width="120" />  
  5.             <asp:BoundField DataField="Name" HeaderText="Name" ItemStyle-Width="120" />  
  6.             <asp:BoundField DataField="Salary" HeaderText="Salary" ItemStyle-Width="120" />  
  7.         </Columns>  
  8.     </asp:GridView>  
  9. </div>  
CodeBehind :

Add the following namespaces:
  1. using System.Data;  
  2. using System.Data.SqlClient;  
  3. using System.Configuration;  
Next copy the following code in your .cs file: 
  1. SqlConnection con = new SqlConnection(ConfigurationManager.ConnectionStrings["conStr"].ConnectionString);  
  2. protected void Page_Load(object sender, EventArgs e)   
  3. {  
  4.     if (!this.IsPostBack)   
  5.     {  
  6.         BindGrid();  
  7.     }  
  8. }  
  9. private void BindGrid()   
  10. {  
  11.     try   
  12.     {  
  13.         SqlCommand cmd = new SqlCommand("USP_GetAllEmployeesByDept", con);  
  14.         cmd.CommandType = CommandType.StoredProcedure;  
  15.         SqlDataAdapter adp = new SqlDataAdapter(cmd);  
  16.         DataSet ds = new DataSet();  
  17.         adp.Fill(ds);  
  18.         if (ds.Tables[0].Rows.Count > 0)   
  19.         {  
  20.             GridView1.DataSource = ds;  
  21.             GridView1.DataBind();  
  22.         }   
  23.         else   
  24.         {  
  25.             GridView1.DataSource = null;  
  26.             GridView1.DataBind();  
  27.         }  
  28.     }   
  29.     catch (Exception ex) {} finally  
  30.     {  
  31.         con.Close();  
  32.     }  
  33. }  
  34.   
  35. protected void OnDataBound(object sender, EventArgs e)   
  36. {  
  37.     for (int i = GridView1.Rows.Count - 1; i > 0; i--)   
  38.     {  
  39.         GridViewRow row = GridView1.Rows[i];  
  40.         GridViewRow previousRow = GridView1.Rows[i - 1];  
  41.         for (int j = 0; j < row.Cells.Count; j++) {  
  42.             if (row.Cells[j].Text == previousRow.Cells[j].Text)   
  43.             {  
  44.                 if (previousRow.Cells[j].RowSpan == 0)   
  45.                 {  
  46.                     if (row.Cells[j].RowSpan == 0)  
  47.                     {  
  48.                         previousRow.Cells[j].RowSpan += 2;  
  49.                     }   
  50.                     else   
  51.                     {  
  52.                         previousRow.Cells[j].RowSpan = row.Cells[j].RowSpan + 1;  
  53.                     }  
  54.                     row.Cells[j].Visible = false;  
  55.                 }  
  56.             }  
  57.         }  
  58.     }  
  59. }  
That's it, run the application and the output will be the following:
 

 
I hope you enjoyed it. Please provide your valuable feedback and suggestions if you found this article helpful.