Custom Control: Modifikasi Gridview

Dalam review akhir tahun tentang kompetensi di ASP webform ada satu point tentang membuat custom control. Karena proyek webform yang saya kerjakan sebelumnya tidak melakukan custom control, akhirnya saya di minta untuk membuat sampel tentang hal ini.

Disini saya akan memodifikasi gridview. Saya akan menambahkan satu kolom checkbox di kolom pertama.  Jika dibutuhkan kita tinggal set property true atau false untuk mengaktifkan.

Kita mulai dari langkah pertama
1. Buat library project baru, beri nama “MyGridView”
Buka visual studio, dan buat projek class library.
File > New Project > Class Library

Tambahkan reference berikut dalam ke project
– System.Web
– System.Web.Extensions
– System.Web.Extensions.Design

2. Kita akan modifikasi gridview, karena itu buat class baru dengan nama “MyCustomGrid” yang merupakan turunan dari Gridview dan tulis kode 2 property berikut

Imports System.Web.UI
Imports System.Web.UI.WebControls
Imports System.Collections.Specialized

<ToolboxData("<{0}:MyCustomGrid runat='server'>")> _
Public Class MyCustomGrid
    Inherits GridView

    Public Property CheckBoxColumn() As Boolean
        Get
            If ViewState("__CHECKBOXCOLUMN") Is Nothing Then
                Return False
            Else
                Return CBool(ViewState("__CHECKBOXCOLUMN"))
            End If
        End Get
        Set(ByVal value As Boolean)
            ViewState("__CHECKBOXCOLUMN") = value
        End Set
    End Property

    Public ReadOnly Property CheckedRowsId() As StringCollection
        Get
            Dim collectionIds As New StringCollection

            If DataKeys.Count > 0 Then
                For i As Integer = 0 To Rows.Count - 1
                    If Rows(i).RowType = DataControlRowType.DataRow Then
                        If (DirectCast(Rows(i).FindControl("cbitem"), CheckBox)).Checked Then
                            collectionIds.Add(DataKeys(Rows(i).RowIndex).Value.ToString())
                        End If
                    End If
                Next
            End If

            Return collectionIds
        End Get
    End Property
End Class

Property pertama “CheckBoxColumn” digunakan untuk mengaktifkan atau menghilangkan kolom checkbox.
Property kedua “CheckedRowsId” digunakan untuk menampung ID dari row gridview. Jadi ketika kolom checkbox diaktifkan dan user men ‘checked’ checkbox nya, kita bisa mengetahui baris mana yang checboxnya aktif.

3. Buat class baru dengan nama “MyHeaderTemplate”
Gridview mempunyai 3 bagian, header, item dan footer. Disini kita akan membuat header untuk kolom checkbox.
Di header kita tambahkan checkbox yang berfungsi untuk melakukan check atau atau uncheck seluruh row di gridview.
Kode di MyHeaderTemplate selengkapnya

Imports System.Web.UI
Imports System.Web.UI.WebControls

Friend NotInheritable Class MyHeaderTemplate
    Implements ITemplate

    Public Sub InstantiateIn(container As Control) Implements ITemplate.InstantiateIn
        Dim headerCheckbox As New CheckBox
        headerCheckbox.ID = "cbheader"
        container.Controls.Add(headerCheckbox)
    End Sub
End Class

Sekarang kita tambahkan checkbox di bagian row data atau item.

4. Buat class baru dengan nama “MyItemTemplate”

Imports System.Web.UI
Imports System.Web.UI.WebControls

Friend NotInheritable Class MyItemTemplate
    Implements ITemplate

    Public Sub InstantiateIn(container As Control) Implements ITemplate.InstantiateIn
        Dim headerCheckbox As New CheckBox
        headerCheckbox.ID = "cbitem"
        container.Controls.Add(headerCheckbox)
    End Sub
End Class

Sekarang kita buat container untuk menampung header dan item yang kita buat

5. Buat class baru dengan nama “TemplateContainer”

Imports System.Web.UI.WebControls
Imports System.ComponentModel

<ToolboxItem(False)> _
Friend Class TemplateContainer
    Inherits WebControl

End Class

Sekarang kita gabungkan header, item dan container tersebut

6. Buat class baru dengan nama “MyTemplateColumn”

Imports System.Web.UI.WebControls

Friend Class MyTemplateColumn
    Inherits TemplateField

    Dim container As TemplateContainer
    Dim header As MyHeaderTemplate
    Dim item As MyItemTemplate

    Friend Sub New()
        container = New TemplateContainer
        header = New MyHeaderTemplate
        item = New MyItemTemplate

        header.InstantiateIn(container)
        Me.HeaderTemplate = header

        item.InstantiateIn(container)
        Me.ItemTemplate = item

        Me.HeaderStyle.VerticalAlign = VerticalAlign.Middle
        Me.HeaderStyle.HorizontalAlign = HorizontalAlign.Center
        Me.HeaderStyle.Width = Unit.Percentage(3)

        Me.ItemStyle.VerticalAlign = VerticalAlign.Middle
        Me.ItemStyle.HorizontalAlign = HorizontalAlign.Center
        Me.ItemStyle.Width = Unit.Percentage(3)
    End Sub
End Class

7. Sekarang kembali ke file pertama “MyCustomGrid.cs”. Tambahkan method berikut

    Protected Overrides Function CreateColumns(dataSource As PagedDataSource, useDataSource As Boolean) As ICollection
        Dim columnList As ICollection = MyBase.CreateColumns(dataSource, useDataSource)

        If Not Me.CheckBoxColumn Then
            Return columnList
        End If

        Dim list As New ArrayList(columnList)
        Dim checkboxColumn As New MyTemplateColumn

        list.Insert(0, checkboxColumn)

        Return list
    End Function

Hasil akhir selengkapnya dari class “MyCustomGrid.cs” dapat dilihat di bawah ini

Imports System.Web.UI
Imports System.Web.UI.WebControls
Imports System.Collections.Specialized
Imports System.ComponentModel

<ToolboxData("<{0}:MyCustomGrid runat='server'>")> _
Public Class MyCustomGrid
    Inherits GridView

    <DefaultValue(False)> _
    <Description("Add checkbox column to the gridview")> _
    <Category("Appearance")> _
    <Browsable(True)> _
    Public Property CheckBoxColumn() As Boolean
        Get
            If ViewState("__CHECKBOXCOLUMN") Is Nothing Then
                Return False
            Else
                Return CBool(ViewState("__CHECKBOXCOLUMN"))
            End If
        End Get
        Set(ByVal value As Boolean)
            ViewState("__CHECKBOXCOLUMN") = value
        End Set
    End Property

    <Description("The ID's of checked rows")> _
    <Browsable(False)>
    Public ReadOnly Property CheckedRowsId() As StringCollection
        Get
            Dim collectionIds As New StringCollection

            If DataKeys.Count > 0 Then
                For i As Integer = 0 To Rows.Count - 1
                    If Rows(i).RowType = DataControlRowType.DataRow Then
                        If (DirectCast(Rows(i).FindControl("cbitem"), CheckBox)).Checked Then
                            collectionIds.Add(DataKeys(Rows(i).RowIndex).Value.ToString())
                        End If
                    End If
                Next
            End If

            Return collectionIds
        End Get
    End Property

    Protected Overrides Function CreateColumns(dataSource As PagedDataSource, useDataSource As Boolean) As ICollection
        Dim columnList As ICollection = MyBase.CreateColumns(dataSource, useDataSource)

        If Not Me.CheckBoxColumn Then
            Return columnList
        End If

        Dim list As New ArrayList(columnList)
        Dim checkboxColumn As New MyTemplateColumn

        list.Insert(0, checkboxColumn)

        Return list
    End Function
End Class

Clean dan build project custom control. Untuk menambahkan control ke dalam toolbox, Clik kanan pada toolbox dan pilih ‘Choose Item’. Browse ke projek, dan pilih MyGridview.dll.

akan muncul seperti gambar berikut

Toolbox Window

Toolbox Window

Sekarang tambahankan 1 projek webapplication ke dalam solution. Buka file default.aspx. Drag my custom grid.
Periksa property ‘CheckboxColumn’ dari custom grid, set menjadi ‘true’ untuk melihat hasilnya.

Display custom gridview

Display custom gridview

Kita bisa menambahkan kode javascript ke custom grid kita, misal ketika kita check header dari checkbox column maka semua checkbox akan ke check. Nah untuk menambahkan kode javascript ke custom control akan di bahas lain kali.

Semoga bermanfaat. Happy coding.
Posted from WordPress for Android

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 1 Januari 2014, in .NET, ASP.net, Uncategorized 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: