Modifikasi Header Gridview

Seorang teman yang baru belajar ASP.net bertanya pada saya bagaimana memodifikasi tampilan header di gridview, tidak hanya satu baris. Teman saya terbiasa menggunakan ASP clasis, sehingga ketika beralih ke dot net, dia tidak punya gambaran sama sekali bagaimana memodifikasi header gridview seperti gambar di bawah ini.

Untuk memodifikasi gridview, pertama buat dulu gridview. Tambahkan di file aspx.

<asp:GridView ID="GridView1" runat="server" BackColor="White"
     BorderColor="#E7E7FF" BorderStyle="None" BorderWidth="1px" CellPadding="3"
     GridLines="Horizontal">
     <FooterStyle BackColor="#B5C7DE" ForeColor="#4A3C8C" />
     <RowStyle BackColor="#E7E7FF" ForeColor="#4A3C8C" />
     <PagerStyle BackColor="#E7E7FF" ForeColor="#4A3C8C" HorizontalAlign="Right" />
     <SelectedRowStyle BackColor="#738A9C" Font-Bold="True" ForeColor="#F7F7F7" />
     <HeaderStyle BackColor="#4A3C8C" Font-Bold="True" ForeColor="#F7F7F7" />
     <AlternatingRowStyle BackColor="#F7F7F7" />
</asp:GridView>

Buat method gridview RowCreated, untuk memodifikasi header sehingga hasil akhirnya seperti gambar pertama.

Di code behind, tambahkan kode berikut. Pertama header row dibersihan lebih dahulu, kemudian buat baris baru sebagai header, dan definisikan cell (kolom) satu persatu.

Protected Sub GridView1_RowCreated(ByVal sender As Object, ByVal e As System.Web.UI.WebControls.GridViewRowEventArgs) _
Handles GridView1.RowCreated
    If e.Row.RowType = DataControlRowType.Header Then
        e.Row.Cells.Clear()

        Dim gv As GridView = CType(sender, GridView)
        'header dibuat 2 brs
        Dim row1 As New GridViewRow(0, 0, DataControlRowType.Header, DataControlRowState.Normal)
        Dim row2 As New GridViewRow(1, 0, DataControlRowType.Header, DataControlRowState.Normal)
        Dim _cell As New TableCell()

        'kolom 1
        _cell.RowSpan = 2 'dua baris dijadikan satu
        _cell.Text = "Jam"  'judul kolom
        _cell.HorizontalAlign = HorizontalAlign.Center
        _cell.VerticalAlign = VerticalAlign.Middle
            row1.Cells.Add(_cell)

        'kolom 2
        _cell = New TableCell()
        _cell.RowSpan = 2
        _cell.Text = "Odo (Km)"
        _cell.HorizontalAlign = HorizontalAlign.Center
        _cell.VerticalAlign = VerticalAlign.Middle
        row1.Cells.Add(_cell)

        'kolom 3
        _cell = New TableCell()
        _cell.RowSpan = 2
        _cell.Text = "Jrk (m)"
        _cell.HorizontalAlign = HorizontalAlign.Center
        _cell.VerticalAlign = VerticalAlign.Middle
        row1.Cells.Add(_cell)

        'kolom 4
        _cell = New TableCell()
        _cell.RowSpan = 2
        _cell.Text = "Km/Jam"
        _cell.HorizontalAlign = HorizontalAlign.Center
        _cell.VerticalAlign = VerticalAlign.Middle
        row1.Cells.Add(_cell)

        'kolom 5
        _cell = New TableCell()
        _cell.ColumnSpan = 4 'empat kolom dijadikan satu
        _cell.Text = "Sensor"
        _cell.HorizontalAlign = HorizontalAlign.Center
        row1.Cells.Add(_cell)

        'tambahkan baris pertama ke gridview
        gv.Controls(0).Controls.AddAt(0, row1)

        'kolom 5.1
        _cell = New TableCell()
        _cell.Text = "1"
        _cell.HorizontalAlign = HorizontalAlign.Center
        row2.Cells.Add(_cell)

        'kolom 5.2
        _cell = New TableCell()
        _cell.Text = "2"
        _cell.HorizontalAlign = HorizontalAlign.Center
        row2.Cells.Add(_cell)

        'kolom 5.3
        _cell = New TableCell()
        _cell.Text = "3"
        _cell.HorizontalAlign = HorizontalAlign.Center
        row2.Cells.Add(_cell)

        'kolom 5.4
        _cell = New TableCell()
        _cell.Text = "4"
        _cell.HorizontalAlign = HorizontalAlign.Center
        row2.Cells.Add(_cell)

        'tambahkan baris kedua ke gridview
        gv.Controls(0).Controls.AddAt(1, row2)
    End If
End Sub

Semoga bermanfaat
Happy coding…

About Yuniar

Penulis sekarang lebih banyak bekerja menggunakan teknologi Microsoft .NET secara umum dan TIDAK lagi menggunakan aplikasi MapXtreme.net dari MapInfo. Karena itu mohon maaf, jika pertanyaan-pertanyaan mengenai MapXtreme sudah tidak bisa saya jawab lagi.

Posted on 14 Januari 2010, in ASP.net and tagged , , , . Bookmark the permalink. Tinggalkan komentar.

Tinggalkan Balasan

Isikan data di bawah atau klik salah satu ikon untuk log in:

Logo WordPress.com

You are commenting using your WordPress.com account. Logout / Ubah )

Gambar Twitter

You are commenting using your Twitter account. Logout / Ubah )

Foto Facebook

You are commenting using your Facebook account. Logout / Ubah )

Foto Google+

You are commenting using your Google+ account. Logout / Ubah )

Connecting to %s

%d blogger menyukai ini: