CODEWITHSUNDEEP
c#asp.net.netgridview
SamuraiJack
SamuraiJack

Reputation: 5539

How to create custom header in ASP.NET Gridview?

I have a GridView in which I will be performing CRUD operations.(therefore i am using templatefields) . I am trying to make my grid look something like this:

enter image description here

Each cell will contain textbox etc. If you notice the columns there are multiple columns within each. How can I do so?

I came across http://www.aspsnippets.com/Articles/ASPNet-GridView-Group-Header-Row-Columns-and-display-Multiple-Columns-under-Single-Column.aspx but this doesnt seem to fulfill my needs.

Upvotes: 0

Views: 4433

Answers (2)

Code
Code

Reputation: 739

    Design your aspx page like this
    
    Designer source code:
    
    <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
    
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    
    <html xmlns="http://www.w3.org/1999/xhtml">
    
    <head runat="server">
    
        <title>gridview header</title> 
    
        <style type="text/css">
    
        .header
    
        {
    
             background-color:#3E3E3E;        
    
             font-family:Calibri;
    
             color:White;
    
             text-align:center;        
    
        }
    
        </style>
    
    </head>
    
    <body>
    
        <form id="form1" runat="server">
    
        <div>
    
             <asp:GridView ID="gvEmployee" runat="server" AutoGenerateColumns="false" Width="600px"
    
                           OnRowCreated="gvEmployee_RowCreated" ShowHeader="false">        
    
             <RowStyle Font-Names="Calibri" />
    
             <Columns>
    
             <asp:BoundField DataField="empid" />
    
             <asp:BoundField DataField="name" />        
    
             <asp:BoundField DataField="city" />
    
             <asp:BoundField DataField="country" />    
    
             <asp:BoundField DataField="designation" />    
    
             <asp:BoundField DataField="joiningdate" />
    
             </Columns>
    
            </asp:GridView>
    
        </div>    
    
        </form>
    
    </body>
    
    </html>
    
     
    
    C# code:
    
     
    
    using System;
    
    using System.Collections.Generic;
    
    using System.Linq;
    
    using System.Web;
    
    using System.Web.UI;
    
    using System.Web.UI.WebControls;
    
    using System.Data; 
    
    public partial class _Default : System.Web.UI.Page
    
    {
    
        protected void Page_Load(object sender, EventArgs e)
    
        {
    
            if (!IsPostBack)
    
            {
    
                BindData();
    
            }
    
        }
    
        protected void BindData()
    
        {
    
            DataSet ds = new DataSet();
    
            ds.ReadXml(Server.MapPath("EmployeeDetails.xml"));
    
            if (ds != null && ds.HasChanges())
    
            {
    
                gvEmployee.DataSource = ds;
    
                gvEmployee.DataBind();
    
            }
    
        }
    
     
    
        protected void gvEmployee_RowCreated(object sender, GridViewRowEventArgs e)
    
        {
    
            if (e.Row.RowType == DataControlRowType.Header)
    
            {
    
                GridViewRow HeaderRow = new GridViewRow(1, 0, DataControlRowType.Header, DataControlRowState.Insert); 
    
    
                TableCell HeaderCell2 = new TableCell();
    
                HeaderCell2.Text = "Personal Details";
    
                HeaderCell2.ColumnSpan = 2;
    
                HeaderRow.Cells.Add(HeaderCell2);
    
     
    
                HeaderCell2 = new TableCell();
    
                HeaderCell2.Text = "Location";
    
                HeaderCell2.ColumnSpan = 2;
    
                HeaderRow.Cells.Add(HeaderCell2);
    
               
    
                HeaderCell2 = new TableCell();
    
                HeaderCell2.Text = "Office details";
    
                HeaderCell2.ColumnSpan = 2;
    
                HeaderRow.Cells.Add(HeaderCell2);
    
     
    
                gvEmployee.Controls[0].Controls.AddAt(0, HeaderRow);
    
     
    
                GridViewRow HeaderRow1 = new GridViewRow(0, 0, DataControlRowType.Header, DataControlRowState.Insert);
    
     
    
                TableCell HeaderCell = new TableCell();
    
                HeaderCell.Text = "Employee-ID";           
    
                HeaderRow1.Cells.Add(HeaderCell);
    
     
    
                HeaderCell = new TableCell();
    
                HeaderCell.Text = "Name";           
    
                HeaderRow1.Cells.Add(HeaderCell);
    
                            
    
                HeaderCell = new TableCell();
    
                HeaderCell.Text = "City";         
    
                HeaderRow1.Cells.Add(HeaderCell);
    
     
    
                HeaderCell = new TableCell();
    
                HeaderCell.Text = "Country";           
    
                HeaderRow1.Cells.Add(HeaderCell);
    
     
    
                HeaderCell = new TableCell();
    
                HeaderCell.Text = "Designation";           
    
                HeaderRow1.Cells.Add(HeaderCell);
    
     
    
                HeaderCell = new TableCell();
    
                HeaderCell.Text = "Joining date";
    
                HeaderRow1.Cells.Add(HeaderCell);
    
     
    
                HeaderRow.Attributes.Add("class", "header");
    
                HeaderRow1.Attributes.Add("class", "header");
    
                gvEmployee.Controls[0].Controls.AddAt(1, HeaderRow1);
    
            }
    
        }[![enter image description here][1]][1]
    
    }

enter image description here

Upvotes: 0

fnostro
fnostro

Reputation: 4591

Here is an example code behind from one of my GridView's for doing just that in the GridView's PreRender event. In this example I'm actually adding two additional rows above the original Header. As you can see I'm adjusting the Colspans of the new cells. Forgive the VB:

    Private Sub gvExpertRateHistory_PreRender(sender As Object, e As System.EventArgs) Handles gvExpertRateHistory.PreRender
        Dim this As GridView = sender
        Dim InnerTable As Table = If(this.HasControls(), this.Controls(0), Nothing)

        If this.HeaderRow IsNot Nothing AndAlso InnerTable IsNot Nothing Then
            Dim hr As GridViewRow

            hr = New GridViewRow(0, -1, DataControlRowType.Header, DataControlRowState.Normal)

            hr.Cells.Add(NewCell(1, String.Empty, this, , HorizontalAlign.Left))
            hr.Cells.Add(NewCell(2, "Requested On", this, , HorizontalAlign.Left))
            hr.Cells.Add(NewCell(4, "Review Rates", this, "WhiteBorderLB"))
            hr.Cells.Add(NewCell(6, "Court Rates", this, "WhiteBorderLB"))
            hr.Cells.Add(NewCell(6, "Deposition Rates", this, "WhiteBorderLB"))
            hr.Cells.Add(NewCell(4, "IME Rates", this, "WhiteBorderLB"))
            InnerTable.Rows.AddAt(0, hr)

            hr = New GridViewRow(0, -1, DataControlRowType.Header, DataControlRowState.Normal)

            hr.Cells.Add(NewCell(1, "Expert", this, , HorizontalAlign.Left))
            hr.Cells.Add(NewCell(2, "Requested By", this, , HorizontalAlign.Left))
            hr.Cells.Add(NewCell(2, "Hourly", this, "WhiteBorderLB"))
            hr.Cells.Add(NewCell(2, "Flat", this, "WhiteBorderLB"))
            hr.Cells.Add(NewCell(2, "Hourly", this, "WhiteBorderLB"))
            hr.Cells.Add(NewCell(2, "Daily", this, "WhiteBorderLB"))
            hr.Cells.Add(NewCell(2, "Half-Day", this, "WhiteBorderLB"))
            hr.Cells.Add(NewCell(2, "Hourly", this, "WhiteBorderLB"))
            hr.Cells.Add(NewCell(2, "Daily", this, "WhiteBorderLB"))
            hr.Cells.Add(NewCell(2, "Half-Day", this, "WhiteBorderLB"))
            hr.Cells.Add(NewCell(2, "Hourly", this, "WhiteBorderLB"))
            hr.Cells.Add(NewCell(2, "Flat", this, "WhiteBorderLB"))
            InnerTable.Rows.AddAt(1, hr)
        End If
    End Sub

This is a Helper function that makes it easier to add new cells.

Note:

  • There is also a RowSpan property in the TableHeaderCell class if needed

  • Also, AddCssClass() is a custom extension function of mine.

    Private Function NewCell(colspan As Int32, 
                         text As String, 
                         gv As GridView, 
                         Optional CssClass As String = "", 
                         Optional Alignment As HorizontalAlign = HorizontalAlign.Center
                       ) As TableHeaderCell

    Dim thc As New TableHeaderCell

    thc.HorizontalAlign = Alignment
    thc.ColumnSpan = colspan
    thc.Text = text
    thc.BackColor = gv.HeaderRow.BackColor
    thc.ForeColor = gv.HeaderRow.ForeColor
    thc.Font.Bold = True
    thc.AddCssClass(CssClass)

    Return thc

End Function

Upvotes: 1

Related Questions