Merge Header hoặc Apply ColumnSpan cho Header của GridView

Asp/Asp.Net 25-3-2015

Đầu tiên tôi sẽ tạo ra ứng dụng asp.net mới và thêm đoạn code dưới đây vào trang.

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="WebApplication1.WebForm1" %>



<!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>Merge Header or Apply ColumnSpan to Header of GridView In Asp.Net Using C#.Net

    </title>

</head>

<body>

    <form id="form1" runat="server">

    <table width="100%" cellpadding="4" cellspacing="4">

        <tr>

            <td align="left">

                <asp:GridView ID="GridView1" runat="server" Width="100%"

                    AutoGenerateColumns="False" onrowcreated="GridView1_RowCreated"

                    ShowFooter="True">

                    <Columns>

                        <asp:TemplateField HeaderText="This is a header text eample">

                            <ItemTemplate>

                                <asp:Label ID="lblName" runat="server" Text='<%# Eval("Name") %>'></asp:Label>

                            </ItemTemplate>

                            <FooterStyle Font-Bold="True" />

                        </asp:TemplateField>

                        <asp:TemplateField>

                            <ItemTemplate>

                                <asp:Label ID="lblNamAddress" runat="server" Text='<%# Eval("Address") %>'></asp:Label>

                            </ItemTemplate>

                        </asp:TemplateField>

                        <asp:TemplateField>

                            <ItemTemplate>

                                <asp:Label ID="lblUserType" runat="server" Text='<%# Eval("UserType") %>'></asp:Label>

                            </ItemTemplate>

                        </asp:TemplateField>

                    </Columns>

                </asp:GridView>

            </td>

        </tr>

    </table>

    </form>

</body>

</html>

Trong đoạn mã trên, tôi đã sử dụng ItemTemplate để ràng buộc các trường GridView và sử dụng control label để hiển thị giá trị sử dụng Eval.


using System;
using System.Data.SqlClient;
using System.Data;
using System.Web.UI.WebControls;
using System.Collections;
namespace WebApplication1
{
    public partial class WebForm1 : System.Web.UI.Page
    {
        protected void Page_Load(object sender, EventArgs e)
        {
            if (!IsPostBack)
            {
                GetDistinctValue();
            }
        }
        private void GetDistinctValue()
        {
            SqlConnection con = new SqlConnection(System.Configuration.ConfigurationManager.ConnectionStrings["con"].ToString());
            try
            {
                DataTable objdt = new DataTable();
                string query = "select * from UserDetail;";
                SqlDataAdapter da = new SqlDataAdapter(query, con);
                con.Open();
                da.Fill(objdt);
                con.Close();
                if (objdt.Rows.Count > 0)
                {
                    GridView1.DataSource = objdt;
                    GridView1.DataBind();
                }
            }
            catch
            {
                con.Close();
            }
        }      
        protected void GridView1_RowCreated(object sender, GridViewRowEventArgs e)
        {
            if (e.Row.RowType == DataControlRowType.Header)
            {
                for (int i = 0; i < GridView1.Columns.Count-1; i++)
                {
                    e.Row.Cells.RemoveAt(1);
                }
               e.Row.Cells[0].ColumnSpan = GridView1.Columns.Count;
            }
        }
    }
}

Đối với Footer thì sử dụng sau:


protected void GridView1_RowCreated(object sender, GridViewRowEventArgs e)
        {
            if (e.Row.RowType == DataControlRowType.Footer)
            {
                for (int i = 0; i < GridView1.Columns.Count-1; i++)
                {
                    e.Row.Cells.RemoveAt(1);
                }
               e.Row.Cells[0].ColumnSpan = GridView1.Columns.Count;
            }
        }

Mã trên tôi đã sử dụng để ràng buộc dữ liệu. Bây giờ kiểm tra mã dưới đây để gộp tiêu đề của GridView.

Bây giờ kiểm tra không sáp nhập tiêu đề.

Merge, Header,Merge Header,Apply ColumnSpan,GridView