Paging: Pengaturan jumlah baris data per halaman pada Grid

Paging dilakukan agar dalam sekali tampilan muncul sekumpulan data tertentu dalam satu kali tampil. Semisal dalam penarikan data ada 100 baris yang tampil, maka kita bisa mengatur agar hanya 20 baris untuk setiap kali tampil. Dengan demikian akan dibutuhkan navigasi halaman untuk mencapai data berikutnya. Pada DataGrid hal ini difasilitasi dengan baik.


Langkah yang harus kita lakukan ialah:
1. Mengatur property AllowPaging pada DataGrid, untuk menentukan bahwa grid menggunakan paging. Nilai yang diisikan ialah true.
2. Melalui property PageSize pada DataGrid, untuk mengatur jumlah baris yang tampak sekali tampil. Data yang diisikan ialah jumlah baris yang dikehendaki.
3. Mengisi event PageIndexChanged pada Datagrid, untuk menentukan tampilan page berikutnya yang harus kelihatan.

private void DataGrid1_PageIndexChanged(object source, System.Web.UI.WebControls.DataGridPageChangedEventArgs e)
{
DataGrid1.CurrentPageIndex = e.NewPageIndex;
DataGrid1.DataSource = dsk;
DataGrid1.DataBind();
DataNumbering(DataGrid1);
}

Untuk mengakses event pageindexchanged ini kita bisa lakukan dengan membuka window properties pada bagian event dan mendobelklik kolom PageIndexChanged, sehingga akan muncul template kode sepert ini dibawah ini:

private void DataGrid1_PageIndexChanged(object source, System.Web.UI.WebControls.DataGridPageChangedEventArgs e)

{

}

Penjelasan dari kode di atas adalah sebagai berikut:

Event di atas akan diproses oleh program, setiap kali page index pada sebuah grid berubah. Perubahan ini tentu saja dipicu dengan user menekan tombol next atau previous pada grid yang muncul setelah kita melakukan langkah 2.

Dengan membagi-bagi baris data dalam paging, maka setiap page dikenali dengan page index. Pada event di atas kita, harus menentukan agar page index yang dituju menjadi page index saat itu yaitu dengan kode berikut ini.

DataGrid1.CurrentPageIndex = e.NewPageIndex;

Di samping itu, kita juga harus melakukan binding ulang pada data.

DataGrid1.DataSource = datasetKita;
DataGrid1.DataBind();

Sehingga isi event di atas akan menjadi seperti ini:

private void DataGrid1_PageIndexChanged(object source, System.Web.UI.WebControls.DataGridPageChangedEventArgs e)

{
DataGrid1.CurrentPageIndex = e.NewPageIndex;
DataGrid1.DataSource = datasetKita;
DataGrid1.DataBind();
}

Dengan melengkapi kode di atas maka Datagrid akan berhasil menampilkan paging sebagaimana yang kita kehendaki.

ASP.NET C# : Step by Step Akses Database dan menampilkan dalam grid

Pada artikel ini saya meringkas cara pengaksesan data ke sebuah database SQL dengan ADO.NET, menggunakan C#. Secara singkat mengakses data yang dicontohkan di sini ialah membuka koneksi ke database, mengakses tabelnya, dan menampilkan dalam sebuah datagrid.


1. Membuka Koneksi Database

Untuk mengakses data, kita menggunakan namespace berikut:

using System;
using System.Data;
using System.Data.OleDb;

Di sini kita menggunakan OleDb untuk mengakses data sql server. Sebetulnya kita bisa juga menggunakan namespace SqlClient, seperti berikut ini:

using System.Data.SqlClient;

Pada OleDb ini, kita menggunakan dua buah Class OleDbConnection dan OleDbCommand.

Contoh selengkapnya seperti tampak pada kode berikut ini. Query kita eksekusi dengan menggunakan OleDbCommand yang kemudian dimasukkan dalam OleDbDataAdapter, dan disajikan dalam DataSet.

namespace WebApplication1

{

public class apClsConnectData

{

public apClsConnectData()

{

}

public DataSet DataConnect(string sSQL)

{

string strCon = "Provider=SQLOLEDB.1; Data Source = 192.168.88.108; Initial Catalog= apDocumentation;" + " User ID =sa; Password=widya";

OleDbConnection cn = new OleDbConnection(strCon);

cn.Open() ;

OleDbCommand cm = new OleDbCommand(sSQL,cn);

OleDbDataAdapter da = new OleDbDataAdapter();

da.SelectCommand = cm;

DataSet ds = new DataSet();

da.Fill(ds);

return ds;

}

}

}

2. Menampilkan data

Untuk menampilkan data, pertama kita bisa menggunakan class yang kita buat di atas, dan kemudian kita masukkan hasilnya – yaitu return value berupa DataSet ke sebuah datagrid.

Berikut kode untuk menggunakan Class di atas:

string sQuery ="Select * from apApplication_DocMain" +
" where apID='" + Application["ApID"].ToString() + "'" ;

apClsConnectData cs = new apClsConnectData();
DataSet dsDoc = new DataSet();
dsDoc = cs.DataConnect(sQuery);

Setelah itu, kita sebetulnya bisa langsung memasukkan ke dalam sebuah datagrid dengan kode berikut ini,

DataGrid1.DataSource= dsDoc;
DataGrid1.DataBind();

dengan tidak lupa mencentang Create Columns Automatically at Runtime, pada Property Builder yang kita akses dengan mengklik kanan Datagrid yang kita tempatkan dalam sebuah web form.

Apabila kita ingin membuat kolomnya secara koding, maka tanda centang di atas kita hilangkan, dan setiap kolom yang ingin ditampilkan di datagrid kita kodekan.

//Column 1

BoundColumn bl1 = new BoundColumn();
bl1.HeaderText = "Description";
bl1.DataField= "Description";

//Column 2

HyperLinkColumn hl = new HyperLinkColumn();
hl.HeaderText = "Title";
hl.DataTextField = "Title";
hl.DataNavigateUrlField ="Location" ;
hl.DataNavigateUrlFormatString ="{0}";

DataGrid1.Columns.Add(hl);
DataGrid1.Columns.Add(bl1);

Pada contoh kode di atas kita membuat kolom BoundColumn dan Hyperlink Column.

widyanahar, 2006