W3LcOmE in MurDeReSS siTe

Di tulisan ini saya akan memberikan tips megenai penulisan paging pada datagrid. Dari semua contoh custom paging di internet yang pernah saya baca agaknya memiliki cara yang cukup komplex, dan juga agak berbelit-belit karena menggunakan temporary file ataupun dengan segala macam web control temporary yang di hidden di halaman aspx.

Langkah yang perlu dilakukan adalah membuat navigasi di halaman aspx. Pada bagian ini saya menggunakan imagebutton control sehingga tampilannya lebih menarik di bandingkan dengan menggunakan text (label control).
Ke 4 web control di bawah ini akan memanggil method yang sama yaitu Navigate. Yang berbeda di sini hanya CommandName -nya saja.

<asp:imageButton ID="lnkFirst1" Runat="server" ImageUrl="images/first.gif"
tooltip="First Page" CommandName="First" OnCommand="Navigate"/>

<asp:imageButton ID="lnkPrev1" Runat="server" ImageUrl="images/previous.gif"
Tooltip="Previous" CommandName="Prev" OnCommand="Navigate"/>&nbsp;&nbsp;

<asp:imageButton ID="lnkNext1" Runat="server" ImageUrl="images/next.gif"
ToolTip="Next" CommandName="Next" OnCommand="Navigate"/>

<asp:imageButton ID="lnkLast1" Runat="server" ImageUrl="images/last.gif"
ToolTip="Last Page" CommandName="Last" OnCommand="Navigate"/>

Pada bagian datagrid control tetap menggunakan attribute AllowPaging=”True”, tetapi PagerStyle-Visible=”False”.
Disini memang agak menarik karena saya tidak menggunakan custom paging, tetapi hasil yang akan kita gunakan di
sini sama dengan custom paging.

<ASP:DataGrid id="MyDataGrid" runat="server" width="100%" AlternatingItemStyle-BackColor="#fbdddd"
 erdana" CellSpacing="0" CellPadding="3" GridLines="Both"
 PagerStyle-Visible="False"
 PageSize="10" OnItemCreated="OnItemCreatedEventHandler" AllowPaging="True" AutoGenerateColumns="false">
</ASP:DataGrid>

Setelah selesai coding pada bagian file aspx, maka sekarang kita akan membuat coding pada code-behind.
Langkah pertama adalah menghitung jumlah halaman yang ada dengan contoh code seperti di bawah ini. Untuk perhitungan jumlah
halaman ini saya menggunakan myDatagrid.Pagesize yang telah ditentukan di datagrid control. Code di bawah ini dapat di tambahkan
pada bagian akhir dari method BindGrid() anda.

'--------------------------------Calculate the pages-------------------------------------------------
        myConnection.Open()
        Dim myCommand = New OleDbCommand(stSql, myConnection)
        Dim myReader As OleDbDataReader = myCommand.ExecuteReader(CommandBehavior.CloseConnection)
        Dim TotalRec As Int32
        If myReader.HasRows Then
            While myReader.Read
                TotalRec = TotalRec + 1
            End While
        End If
        myReader.Close()
        Dim TotalPage As Int16 = Math.Round(TotalRec / MyDataGrid.PageSize, 1)
        lblTotalPage.Text = Convert.ToString(Convert.ToUInt16(TotalPage))

        '--------------------------inisialisasi tampilan button navigasi
        If MyDataGrid.CurrentPageIndex = 0 Then
            lnkFirst1.Enabled = False
            lnkFirst1.ImageUrl = "images/first_dis.gif"
            lnkPrev1.Enabled = False
            lnkPrev1.ImageUrl = "images/previous_dis.gif"
            lnkLast1.Enabled = True
            lnkLast1.ImageUrl = "images/last.gif"
            lnkNext1.Enabled = True
            lnkNext1.ImageUrl = "images/next.gif"
        End If

        '------------------------------------------------------------------

Selanjutnya yang perlu ditambahkan untuk mendukung paging ini adalah method Navigate.
Perhatikan code di bawah ini, saya menggunakan Mydatagrid.CurrentPageIndex untuk mengetahui posisi halaman kita berada.
Untuk SELECT CASE tersebut kita menggunakan CommandName yang telah ditentukan pada datagrid control di halaman ASPX.
Image yang digunakan di sini ada 2 untuk setiap tombol navigasi, saya akan ambil tombol first sebagai contoh.
Image first.gif adalah dengan warna yang lebih terang, dengan maksud menandakan tombol aktif dan dapat di klik, sedangkan first_dis.gif adalah image yang tombol tidak aktif dan menggunakan warna abu-abu.

    Public Sub Navigate(ByVal sender As Object, ByVal e As CommandEventArgs)
        Select Case e.CommandName
            Case "First"
                MyDataGrid.CurrentPageIndex = 0
                lnkFirst1.Enabled = False
                lnkFirst1.ImageUrl = "images/first_dis.gif"
                lnkPrev1.Enabled = False
                lnkPrev1.ImageUrl = "images/previous_dis.gif"

                lnkLast1.Enabled = True
                lnkLast1.ImageUrl = "images/last.gif"
                lnkNext1.Enabled = True
                lnkNext1.ImageUrl = "images/next.gif"

            Case "Next"
                MyDataGrid.CurrentPageIndex = MyDataGrid.CurrentPageIndex + 1
                If MyDataGrid.CurrentPageIndex = CInt(lblTotalPage.Text) - 1 Then
                    lnkLast1.Enabled = False
                    lnkLast1.ImageUrl = "images/last_dis.gif"
                    lnkNext1.Enabled = False
                    lnkNext1.ImageUrl = "images/next_dis.gif"

                End If
                lnkFirst1.Enabled = True
                lnkFirst1.ImageUrl = "images/first.gif"
                lnkPrev1.Enabled = True
                lnkPrev1.ImageUrl = "images/previous.gif"

            Case "Prev"
                MyDataGrid.CurrentPageIndex = MyDataGrid.CurrentPageIndex - 1
                If MyDataGrid.CurrentPageIndex = 0 Then
                    lnkFirst1.Enabled = False
                    lnkFirst1.ImageUrl = "images/first_dis.gif"
                    lnkPrev1.Enabled = False
                    lnkPrev1.ImageUrl = "images/previous_dis.gif"

                End If
                lnkLast1.Enabled = True
                lnkLast1.ImageUrl = "images/last.gif"
                lnkNext1.Enabled = True
                lnkNext1.ImageUrl = "images/next.gif"

            Case "Last"
                MyDataGrid.CurrentPageIndex = CInt(lblTotalPage.Text) - 1
                'Top navigation
                lnkLast1.Enabled = False
                lnkLast1.ImageUrl = "images/last_dis.gif"
                lnkNext1.Enabled = False
                lnkNext1.ImageUrl = "images/next_dis.gif"

                lnkFirst1.Enabled = True
                lnkFirst1.ImageUrl = "images/first.gif"
                lnkPrev1.Enabled = True
                lnkPrev1.ImageUrl = "images/previous.gif"

        End Select
        BindGrid()
    End Sub

Dari contoh di atas dapat kita lihat bahwa tidak perlu menuliskan code yang panjang dan bertele-tele seperti membuat temporary file dan contorol-control lainnya yang membuat langkah coding lebih panjang.