Learn: Group Columns in Asp.net Gridview Header Row & Display Multiple Columns Under Single Column

Here I will explain how to group columns in asp.net gridview header row in C# and VB.NET or show multiple columns under single column in asp.net gridview.

Description:

In previous articles I explained Show Gridview row details in tooltip, Show tooltip for gridview header columns, jQuery change tooltip style in asp.net, Add tooltip to dropdownlist items in asp.net, Create simple tooltip with jQuery UI plugin, Asp.net Interview questions, Highlight Gridview records based on search and many articles relating to Gridview, SQL, jQuery,asp.net, C#,VB.NET. Now I will explain how to group columns in gridview in asp.net with C# and VB.NET.

To group columns in gridview we need to write the code like as shown below

<head>

<title>Group Gridview Columns in asp.net</title>

</head>

<body>

<div>

<asp:GridView ID="gvDetails" AutoGenerateColumns="false" CellPadding="5" runat="server" OnRowDataBound="gvDetails_RowDataBound">

<asp:BoundField HeaderText="UserId" DataField="UserId" />

<asp:BoundField HeaderText="UserName" DataField="UserName" />

<asp:BoundField HeaderText="Education" DataField="Education" />

<asp:BoundField HeaderText="Location" DataField="Location" />

</Columns>

</asp:GridView>

</div>

</form>

</body>

</html>

Now in code behind add the following namespaces

C# Code

using System;

using System.Data;

using System.Web.UI.WebControls;

After that add below code in code behind

protected void Page_Load(object sender, EventArgs e)

{

if (!IsPostBack)

{

BindGridview();

}

protected void BindGridview()

{

DataTable dt = new DataTable();

dt.Columns.Add("UserId", typeof(Int32));

dt.Columns.Add("UserName", typeof(string));

dt.Columns.Add("Education", typeof(string));

dt.Columns.Add("Location", typeof(string));

dt.Rows.Add(1, "SureshDasari", "B.Tech", "Chennai");

dt.Rows.Add(2, "MadhavSai", "MBA", "Nagpur");

dt.Rows.Add(3, "MaheshDasari", "B.Tech", "Nuzividu");

dt.Rows.Add(4, "SureshDasari", "B.Tech", "Chennai");

gvDetails.DataSource = dt;

gvDetails.DataBind();

}

protected void gvDetails_RowDataBound(object sender, GridViewRowEventArgs e)

{

GridViewRow gvRow = e.Row;

if (gvRow.RowType == DataControlRowType.Header)

{

GridViewRow gvrow = new GridViewRow(0, 0, DataControlRowType.Header, DataControlRowState.Insert);

TableCell cell0 = new TableCell();

cell0.Text = "Age Group";

cell0.HorizontalAlign = HorizontalAlign.Center;

cell0.ColumnSpan = 2;

TableCell cell1 = new TableCell();

cell1.Text = "No. Of Employees";

cell1.HorizontalAlign = HorizontalAlign.Center;

cell1.ColumnSpan = 2;

gvrow.Cells.Add(cell0);

gvrow.Cells.Add(cell1);

gvDetails.Controls[0].Controls.AddAt(0, gvrow);

}

VB.NET Code

Imports System.Data

Imports System.Web.UI.WebControls

Partial Class VBCode

Inherits System.Web.UI.Page

Protected Sub Page_Load(ByVal sender As Object, ByVal e As EventArgs) Handles Me.Load

If Not IsPostBack Then

BindGridview()

End If

End Sub

Protected Sub BindGridview()

Dim dt As New DataTable()

dt.Columns.Add("UserId", GetType(Int32))

dt.Columns.Add("UserName", GetType(String))

dt.Columns.Add("Education", GetType(String))

dt.Columns.Add("Location", GetType(String))

dt.Rows.Add(1, "SureshDasari", "B.Tech", "Chennai")

dt.Rows.Add(2, "MadhavSai", "MBA", "Nagpur")

dt.Rows.Add(3, "MaheshDasari", "B.Tech", "Nuzividu")

dt.Rows.Add(4, "SureshDasari", "B.Tech", "Chennai")

gvDetails.DataSource = dt

gvDetails.DataBind()

End Sub

Protected Sub gvDetails_RowDataBound(ByVal sender As Object, ByVal e As GridViewRowEventArgs)

Dim gvRow__1 As GridViewRow = e.Row

If gvRow__1.RowType = DataControlRowType.Header Then

Dim gvrow__2 As New GridViewRow(0, 0, DataControlRowType.Header, DataControlRowState.Insert)

Dim cell0 As New TableCell()

cell0.Text = "Age Group"

cell0.HorizontalAlign = HorizontalAlign.Center

cell0.ColumnSpan = 2

Dim cell1 As New TableCell()

cell1.Text = "No. Of Employees"

cell1.HorizontalAlign = HorizontalAlign.Center

cell1.ColumnSpan = 2

gvrow__2.Cells.Add(cell0)

gvrow__2.Cells.Add(cell1)

gvDetails.Controls(0).Controls.AddAt(0, gvrow__2)

End If

End Sub

End Class

Demo

Learn

Saturday, 18 January 2014

Group Columns in Asp.net Gridview Header Row & Display Multiple Columns Under Single Column

No comments:

Post a Comment