• admin
• February 24, 2024
• No Comments

I know for some one it will sound like a very basic code for the row span of grid view but still there are lots of people that does not about that. So I thought it will be a good idea to write a blog post about it. So in this blog post we are going to learn How we can use row span in ASP.NET Grid Views. So what we are waiting for Let’s take a small example of sample ASP.NET Web forms application. So Let’s start by creating an empty ASP.NET Webforms application like below.

After that I have added a page web page like below.

And here is the code I have written for asp.net web page html.

So here we  are going to create employee grid so I have created a employee class like following.

namespace GridViewRowSpan
{
    public class Employee
    {
        public int Id { get; set; }
        public string FirstName { get; set; }
        public string LastName { get; set; }
        public string Designation { get; set; }
        public string Department { get; set; }
    }
}

And here’s how I have created a list of Employee class to demonstrate row span in asp.net web page_load event.

protected void Page_Load(object sender, EventArgs e)
{
    List employees = new List
    {
        new Employee {Id=1,FirstName="Jalpesh",
            LastName="Vadgama",
            Designation="Project Manager",
            Department="Development"},
        new Employee {Id=2,
            FirstName="Teerth",
            LastName="Vadgama",
            Designation="Software Developer",
            Department="Development"},
        new Employee{Id=3,
            FirstName="Kalpesh",
            LastName="Virani",
            Designation="IT Manager",
            Department="IT Infrastructure"
            },
        new Employee{Id=5,
            FirstName="Vijay",
            LastName="Gajjar",
            Designation="Network Admin",
            Department="IT Infrastructure"
        }
    };

    employeeGrid.DataSource = employees;
    employeeGrid.DataBind();
    AddRowSpanToGridView();
}

So If you see above code carefully. You can see that I have crated a list of employees where two employees have same last name and other thing you can see is employees are having common departments. If you see below code carefully then you can see that I have create a function called add AddRowSpanToGridView which add row span to columns of grid view. Following is a code for that.

public void AddRowSpanToGridView()
{
    for (int rowIndex = employeeGrid.Rows.Count - 2; rowIndex >= 0; rowIndex--)
    {
        GridViewRow currentRow = employeeGrid.Rows[rowIndex];
        GridViewRow previousRow = employeeGrid.Rows[rowIndex + 1];

        for (int i = 0; i < currentRow.Cells.Count; i++)
        {
            if (currentRow.Cells[i].Text == previousRow.Cells[i].Text)
            {
                if (previousRow.Cells[i].RowSpan < 2)
                {
                    currentRow.Cells[i].RowSpan = 2;
                }
                else
                    currentRow.Cells[i].RowSpan = previousRow.Cells[i].RowSpan + 1;
                previousRow.Cells[i].Visible = false;
            }
        }
    }
}

If you see in the above code, What I have done is created a for loop that will traverse through rows from the bottom to top and then I have selected row and previous row via index and then again I have created a loop to traverse the cell(columns) and checked whether text of columns are same with previous row cell(column text). If both are same then I have checked with If that they have already have row span then I added one otherwise I have made row span to 2. Also I have made previous row cell visible false to display one column. Now when you run application in browser. It will show row span as expected.

That’s it. Hope you like it. Stay tuned for more.

You can find complete of source code of this application on Github at -https://github.com/dotnetjalps/RowSpan-in-grid-view