Pagination dan styling merupakan dua hal yang umum dilakukan untuk meningkatkan user experience pada aplikasi. Pagination digunakan untuk memisahkan beberapa baris data kedalam halaman (page), tujuannya untuk memudahkan user melihat data dengan hanya menampilkan beberapa data per halaman.

Styling digunakan untuk “memperindah” tampilan DataGridView kepada user, biasanya berupa kombinasi warna untuk meningkatkan look-and-feel dari data yang ditampilkan. Trik utama untuk membuat style adalah pemilihan warna. Bagaimana penggunaan warna dapat mengubah look-and-feel. Tanpa perlu menggunakan library pihak ketiga seperti Telerik dan DevExpress, Anda dapat membuat tampilan DataGridView yang menarik dengan kombinasi warna yang tepat.

Pagination

Untuk melakukan pagination, penulis menggunakan kueri SQL berikut (kueri merupakan hasil implementasi dari Aram Koukia[1]).

 1
 2
 3
 4
 5
 6
 7
 8
 9
10

SELECT
   ROW_NUMBER() OVER(ORDER BY ProductId), * 
FROM 
   [Product] 
ORDER BY 
   [ProductId] 
OFFSET 
   10 ROWS 
FETCH 
   NEXT 50 ROWS ONLY;

Kueri di atas dapat dirombak menjadi beberapa bagian, yaitu:

1. Menambah kolom baru untuk menampung nomor baris (ROW_NUMBER()).
2. Mengambil baris dari tabel Product dengan include semua kolom.
3. Urutan baris yang diambil diurutkan sesuai kolom ProductId.
4. Baris yang diambil dimulai dari baris nomor 11 (OFFSET 10).
5. Jumlah baris yang diambil adalah 50 baris.

Untuk maju/mundur halaman (page), Anda bisa mengubah OFFSET menjadi nomor baris yang akan diambil, sedangkan untuk mengubah jumlah baris yang ditampilkan dalam satu halaman, Anda dapat mengubah jumlah baris pada kueri FETCH NEXT.

Styling

Untuk melakukan styling, DataGridView bawaan .NET Framework memiliki banyak kustomisasi yang dapat diubah. Penulis biasanya menggunakan tiga kustomisasi bawaan DataGridView, yaitu:

1. DefautCellStyle, properti ini akan menerapkan tema pada semua sel (secara umum).
2. AlternatingCellStyle, properti ini akan menerapkan tema pada semua sel ganjil.
3. HeaderCellStyle, properti ini akan menerapkan tema pada sel bagian header.

Selain penggunaan CellStyle, properti bawaan lain seperti Font, BackColor dan ForeColor memainkan peranan penting untuk mempercantik tampilan DataGridView. Untuk membuat tampilan DataGridView yang menarik, Anda dapat bereksperimen dengan kombinasi warna dengan melihat referensi palet warna seperti Material Color System.

Demo Aplikasi

Clone repositori source code, kemudian buka KF.DataGridEnhanced.sln. Buat database baru dan buat tabel baru beserta isinya. Pada contoh ini, penulis menggunakan tabel Product dengan kolom sebagai berikut.

Contoh Tabel untuk Pagination

Setelah Anda memiliki project KF.DataGridEnhanced dan databasenya, Anda dapat mengubah beberapa source code pada project demo KF.DataGridEnhanced.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28

Private _datagridEnhanced As EnhancedDataGridView

Sub New()
    ' This call is required by the designer.
    InitializeComponent()

    ' Buat instance baru untuk setiap services
    _datagridEnhanced = New EnhancedDataGridView

    ' Set datagridview
    _datagridEnhanced.SetDataGridView(dgv)

    ' Set connectionstring dan tabel
    _datagridEnhanced.ConnectionString = "Data Source=localhost\\SQLEXPRESS;Initial Catalog=WiyataBhakti;Integrated Security=True"
    _datagridEnhanced.TableName = "Product" ' nama tabel
    _datagridEnhanced.OrderColumn = "ProductId" ' primary key atau kolom lain untuk ordering
    _datagridEnhanced.PageSize = 20 ' jumlah entri per halaman
    _datagridEnhanced.ReloadData() ' reload data, hanya panggil 1 kali sebelum ambil data

    AddHandler _datagridEnhanced.PageSwitched, AddressOf Pagination_PageSwitched ' event handler halaman

    ' Set style
    cboTheme.SelectedIndex = 0

    ' tampilkan data pada halaman pertama
    lblPageTotal.Text = "dari " & _datagridEnhanced.GetPageCount()
    _datagridEnhanced.GotoPage(1)
End Sub

Referensi

1. Koukia, Aram. 2016. Let SQL Server Query Do the Pagination for You. Diakses 9 Juni 2018.
2. Microsoft. 2007. Tutorial 25: Efficiently Paging Through Large Amounts of Data. Diakses 9 Juni 2018.
3. Phan, Chesiung. 2014. Kosmetik DataGridView. Diakses 10 Juni 2018.