Bagaimana cara membuat Gridview merender THEAD?

112

Bagaimana cara mendapatkan GridViewkontrol untuk merender <thead> <tbody>tag? Aku tahu .UseAccessibleHeadersmembuatnya jadi <th>lebih baik <td>, tapi aku tidak bisa membuatnya <thead>muncul.

Andrew Bullock
sumber
FYI: UseAccessibleHeader adalah "true" secara default, jadi Anda tidak perlu menyetelnya. msdn.microsoft.com/en-us/library/…
MikeTeeVee

Jawaban:

187

Ini harus melakukannya:

gv.HeaderRow.TableSection = TableRowSection.TableHeader;
Phil Jenkins
sumber
69
The HeaderRowproperti akan nullsampai GridViewtelah data terikat, jadi pastikan untuk menunggu sampai penyatuan data telah terjadi sebelum menjalankan baris di atas kode.
bdukes
6
Seperti komentar di bawah ini, dengan ASP.NET 4.5 setidaknya setelah pengikatan tidak cukup terlambat - ia bekerja di OnPreRender.
philw
Saya memiliki tampilan grid dengan sub header kustom ditambahkan. Masing-masing sub header ini memang menampilkan data dari sumber data. Alasan saya ingin membuat theadadalah menggunakannya di jQuery. Namun setelah rendering header, tbodytampaknya tidak tersedia. Apa yang mungkin hilang dalam kasus saya?
bonCodigo
1
Saya menemukan masih ada masalah selama postback dan menempatkan kode di event databound yang membahas semua skenario.
James Westgate
Saya membawa data saya dari database saat pengguna mengklik tombol. Dalam hal ini gridview tidak memiliki tag thead. Ada bantuan?
touinta
25

Saya menggunakan ini dalam OnRowDataBoundacara:

protected void GridViewResults_OnRowDataBound(object sender, GridViewRowEventArgs e) {
    if (e.Row.RowType == DataControlRowType.Header) {
        e.Row.TableSection = TableRowSection.TableHeader;
    }
}
Neto Kuhn
sumber
7
Ini adalah satu-satunya solusi yang berhasil untuk saya. Siapa yang merancang kontrol yang mengerikan ini?
EKW
2
Saya memasukkan kode Anda ke acara OnRowCreated dan membuatnya berfungsi dengan benar.
yougotiger
Ini adalah solusi terbaik karena menghilangkan risiko (dan pemeriksaan yang diperlukan) dari TableSection menjadi null jika tidak ada baris dalam DataSource.
EvilDr
1
Perlu diketahui, jika GridViewdalam UpdatePaneldan async-postback disebabkan oleh beberapa kontrol lain maka OnRowDataBoundacara tidak akan dimunculkan sehingga kode dalam jawaban ini tidak akan dijalankan, mengakibatkan GridViewkembali ke rendering tanpa <thead>tag ... sigh . Untuk menargetkan kasus ini, dorong kode dari jawaban yang diterima ke dalam PreRenderevent handler gridView (seperti yang disarankan oleh jawaban ASalvo ).
Tn. Z
Ini adalah jawaban yang benar, karena menggunakan alur kerja WebForms dengan benar.
Marcel
10

Kode dalam jawaban harus berupa Page_Loadatau GridView_PreRender. Saya memasukkannya ke dalam metode yang dipanggil Page_Loaddan mendapatkan file NullReferenceException.

ASalvo
sumber
4
Anda juga bisa mengadakan DataBoundacara. grid.DataBound += (s, e) => { grid.HeaderRow.TableSection = TableRowSection.TableHeader; };
BrunoLM
4
Tidak tahu apakah ini berbeda dalam .NET 4.5 sekarang ... tetapi saya mendapatkan HeaderRow menjadi null di kedua penangan acara _DataBound dan _PreRender. Ini mungkin terkait dengan fakta bahwa saya menggunakan ASP.NET Web Forms fitur baru "Model Binding" di gridView.
ClearCloud8
7

Saya menggunakan kode berikut untuk melakukan ini:

The ifpernyataan saya menambahkan penting.

Jika tidak (tergantung cara Anda merender kisi), Anda akan menampilkan pengecualian seperti:

Tabel harus berisi bagian baris dalam urutan header, isi, dan kemudian footer.

protected override void OnPreRender(EventArgs e)
{
    if ( (this.ShowHeader == true && this.Rows.Count > 0)
      || (this.ShowHeaderWhenEmpty == true))
    {
        //Force GridView to use <thead> instead of <tbody> - 11/03/2013 - MCR.
        this.HeaderRow.TableSection = TableRowSection.TableHeader;
    }
    if (this.ShowFooter == true && this.Rows.Count > 0)
    {
        //Force GridView to use <tfoot> instead of <tbody> - 11/03/2013 - MCR.
        this.FooterRow.TableSection = TableRowSection.TableFooter;
    }
    base.OnPreRender(e);
}

The thisobjek adalah GridView saya.

Saya sebenarnya mengesampingkan Asp.net GridView untuk membuat kontrol kustom saya sendiri, tetapi Anda dapat menempelkannya ke halaman aspx.cs Anda dan mereferensikan GridView dengan nama daripada menggunakan pendekatan custom-gridview.

FYI: Saya belum menguji logika footer, tapi saya tahu ini berfungsi untuk Header.

MikeTeeVee
sumber
5

Ini bekerja untuk saya:

protected void GrdPagosRowCreated(object sender, GridViewRowEventArgs e)
{
    if (e.Row.RowType == DataControlRowType.DataRow)
    {
        e.Row.TableSection = TableRowSection.TableBody;
    }
    else if (e.Row.RowType == DataControlRowType.Header)
    {
        e.Row.TableSection = TableRowSection.TableHeader;
    }
    else if (e.Row.RowType == DataControlRowType.Footer)
    {
        e.Row.TableSection = TableRowSection.TableFooter;
    }
}

Ini dicoba di VS2010.

Felipe Delgado
sumber
2

Buat fungsi dan gunakan fungsi itu di PageLoadacara Anda seperti ini:

Fungsinya adalah:

private void MakeGridViewPrinterFriendly(GridView gridView) {  
    if (gridView.Rows.Count > 0) {          
        gridView.UseAccessibleHeader = true;  
        gridView.HeaderRow.TableSection = TableRowSection.TableHeader;  
    }  
} 

The PageLoadevent adalah:

protected void Page_Load(object sender, EventArgs e) {
        if (!IsPostBack)
        {
            MakeGridViewPrinterFriendly(grddata);
        }
}
Rajpurohit
sumber
1

Saya tahu ini sudah tua, tetapi, inilah interpretasi dari jawaban MikeTeeVee, untuk tampilan kisi standar:

halaman aspx:

<asp:GridView ID="GridView1" runat="server" 
    OnPreRender="GridView_PreRender">

aspx.cs:

    protected void GridView_PreRender(object sender, EventArgs e)
    {
        GridView gv = (GridView)sender;

        if ((gv.ShowHeader == true && gv.Rows.Count > 0)
            || (gv.ShowHeaderWhenEmpty == true))
        {
            //Force GridView to use <thead> instead of <tbody> - 11/03/2013 - MCR.
            gv.HeaderRow.TableSection = TableRowSection.TableHeader;
        }
        if (gv.ShowFooter == true && gv.Rows.Count > 0)
        {
            //Force GridView to use <tfoot> instead of <tbody> - 11/03/2013 - MCR.
            gv.FooterRow.TableSection = TableRowSection.TableFooter;
        }

    }
Jonathan Harris
sumber
0

Anda juga dapat menggunakan jQuery untuk menambahkannya. Ini menghindari masalah dengan TableRowSection.TableHeader yang dijatuhkan di PostBack.

$('#myTableId').prepend($("<thead></thead>").append($(this).find("#myTableId tr:first")));

Michael
sumber