Cấp bậc tác giả:

DOTNET

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

Được viết bởi webmaster ngày 22/02/2015 lúc 12:43 AM
Bài viết này sẽ làm thế nào có thể kết hợp footer hoặc áp dụng columnspan cho header của gridview.
  • 0
  • 1359

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


Đầ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 đề.

1-header.png

Bây giờ chạy ứng dụng để kiểm tra.
2-merg-header.png

Nguồn bài viết: DOTNET.VN

BÌNH LUẬN BÀI VIẾT

Bài viết mới nhất

LIKE BOX

Bài viết được xem nhiều nhất

HỌC HTML