Sunday, August 11, 2019

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

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.



No comments:

Post a Comment

How to register multiple implementations of the same interface in Asp.Net Core?

 Problem: I have services that are derived from the same interface. public interface IService { } public class ServiceA : IService { ...