5/25/2018 ASP.net Part 14 - DataControl
1/27
Part 14 DataControl
M.Suryo Pranoto
http://suryodesign.asia
www.suryodesign.wordpress.com
Pendahuluan
Pada Pertemuan sebelumna kita telah mempelajari berbagai jenis databinding yang ada dari mulai untuk
mencetak single values hingga komponen list dan control lainnya, dan kita telah melihat fitur2 yang
memudahkan pada komponen yang ada seperti edit , update , dan delete maupun paging yang otomatis
telah di sediakan oleh komponen yang ada .
Sekarang kita akan mencoba untuk membuat menu itu secara manual agar lebih leluasa dan sesuai
dengan keinginan kita , disini kita telah mencoba semua pada pertemuan sebelumnya untuk mencoba
komponen yang ada , tapi kita akan mengenali komponen yang kita gunakan untuk menampilkan data
tersebut secara lebih dalam .
Isi
Berikut rich data control yang dapat kita gunakan :
1.GridView : GridView merupakan komponen yang dipakai untuk menampilkan data dalam jumlah besar
dan data dapat ditamilkan sekaligus , dan merupakan peneerus dari ASP.NET 1.x DataGrid , komponen
GridView ini menurut saya merupakan komponen yang paling efektif dan paling banyak digunakan
dibanding dengan komponen competitor nya yang lain.
2.Detail Views : Detail View tidak menampilkan smua data yang ada tetapi hanya menampilkan single
record atau hanya sebuah data atau bisa kita bilang di dalam 1 table yang ditampilkan hanya ada 1 data
Lisensi Dokumen:
Copyright 2003-2009 IlmuKomputer.Com
Seluruh dokumen di IlmuKomputer.Com dapat digunakan, dimodifikasi dan
disebarkan secara bebas untuk tujuan bukan komersial (nonprofit), dengan syarat
tidak menghapus atau merubah atribut penulis dan pernyataan copyright yang
disertakan dalam setiap dokumen. Tidak diperbolehkan melakukan penulisan ulang,
kecuali mendapatkan ijin terlebih dahulu dari IlmuKomputer.Com.
5/25/2018 ASP.net Part 14 - DataControl
2/27
yang ditpilkan secara lengkap , menu ini terkesan lebih detail ketimbang gridView dan lebih cocok untuk
di pakai pada system peng-inputan dan edit data menurut saya.
3.FormView seperti Detail View , Form View memiliki sebuah record pada waktu yang ada dan memiliki
fitur untuk mendukung Edittig , perbedannya hanya pada FormView berdasarkan atau berbasis
template yang mengizinkan kita untuk melakukan kombinasi antara field agar lebih flexible dalam
digunakan . nanti kita akan melihat penggunaan komponen ini lebih lanjut
GridView
Kemudian untuk komponen pertama yang akan kita bahas disini adalah GridView Control , tadi di atas
sudah di jelaskan GridView secara garis besar :
berikut dukungan dari GridView Control :
1.kemampuan Binding data Source seperti SqlDataSource2.Memiliki Sorting
3.Memiliki kemampuan untuk update dan delete data
4.Kemampuan untuk paging
5.kemampuan dalam pemilihan data / Row selection
6.Programammatic access ke GridView object model secara dynamic untuk mengganti properties ,
handle events dan lain-lain
7.Multiple Key fields
8.Multiple data fields untuk hyperlink columns
9.Customize penampilan seperti Themes and styles
Seperti kita ketahui secara garis besar ada 3 cara untuk menampilkan data melalu dataGrid :1.Dengan Wizard
2.Dengan HardCode
3.Melalu DataSource
Berikut kita akan mencoba menampilkan data melalui HardCode dan DataSource yang sudahkita lakukan
sebelumnya , biar lebih jelas tidak ada salahnya saya mengulangi :
Berikut pada halaman GridView.aspx kita memiliki 2 GridView , 1 akan kita tampilkan dengan HardCode
dan 1 dengan menggunakan DataSource :
GridView1 dengan HardCode :
Pertama-tama buat objek yang akan digunakan seperti berikut :
publ i c par t i al cl ass Gr i dVi ew : Syst em. Web. UI . Page{
/ / mengambi l connect i on st r i ng dari Web. Conf i gpri vat e st r i ng Sur yoCon =
Conf i gurat i onManager . Connect i onSt r i ngs[ "Sur yoConnect i on" ] . Connect i onSt r i ng;/ / membuat obj ek Sql Dat aAdapterSql DataAdapter da ;/ / membuat obj ek Dat aSetDat aSet ds;
5/25/2018 ASP.net Part 14 - DataControl
3/27
/ / Membuat obj ek Sql CommandSql Command com = new Sql Command( ) ;
}
Kemudian ketika halaman load buat perintah hardcode untuk mengisi data ke GridView1 :
pr ot ect ed voi d Page_Load( obj ect sender , Event Ar gs e){
/ / membuat koneksiSql Connect i on con = new Sql Connect i on( Sur yoCon) ;t ry{
/ / mengi si per i nt ah commandcom. CommandText = "sel ect * f r om msbar ang";/ / mendef i ni si kan koneksi yang akan di gunakancom. Connect i on = con;
/ / mel akukan eksekusi per i ntah dar i commandda = new Sql Dat aAdapter ( com) ;/ / membuat dataset untuk menyi mpan datads = new Dat aSet ( ) ;/ / menyi mpan data yang di sel ect ke dal am
/ / dat aset dengan nama Tabl es bar angda. Fi l l ( ds, "bar ang") ;/ / memi l i h datasour ce yang di gunakanGr i dVi ew1. DataSour ce = ds;/ / memi l i h DataMember dar i Tabl es pada dat aSetGr i dVi ew1. Dat aMember = "bar ang";/ / mel akukan bi ndi ng unt uk menampi l kan dat aGr i dVi ew1. Dat aBi nd( ) ;
/ / menut up koneksicon. Cl ose( ) ;}cat ch ( Except i on kesal ahan){
/ / menampi l kan pesan kesal ahan yang adaMessageBox. Show( kesal ahan. ToSt r i ng( ) ) ;
}f i nal l y{
/ / menghapus koneksi yang adacon. Di spose( ) ;
}}
Dan kemudian pada halaman GridView.aspx kita akan menampilkan data pada GridView2 dengan
DataSource , kita tidak membutuhkan hardcode pada halaman .aspx.cs hanya membutuhkan sedikit
modifikasi SqlDataSource code pada halaman .aspx seperti berikut :
5/25/2018 ASP.net Part 14 - DataControl
4/27
kalau anda lupa dan bertanya dari mana asal SuryoConnection ? seperti pada pertemuan sebelumnya
kita mendapatkan melalui web.config . dan kemudian pada GridView2 kita akan memilih DataSourceyang akan kita gunakan, pilih SQLDataSource1 yang akan digunakan , ata anda dapat menggantinya
melalui code dari GridView seperti berikut :
Disini kita telah menampilkan data , berikut hasilnya :
Tapi tahukah kalian kenapa data ini tampil ? ya iyalah pasti tampil karena kan udah kita hardcode untuk
menampilkan data ? itu emang benar ! tetapi perlu kita ketahui data di atas pada GridView merupakan
Table yang memiliki Row dan Column , dan ini muncul karena ada properties dari DataGridView yaitu
AutoGenerateColumn yang bernilai TRUE.
5/25/2018 ASP.net Part 14 - DataControl
5/27
Tapi tahukah anda apa yang akan terjadi bila kolom tersebut kita set dengan FALSE ?
jawabannya adalah tidak akan ada data yang akan muncul atau ditampilkan , lalu bagaimana kita
membuat data itu muncul kembali ? yup disini kita akan belajar DataControl untuk membuat masing2
column yang ada.
Berikut tipe Column :
BoundField menampilkan text yang berasal dari field pada datasource
ButtonField menampilkan button untuk masing2 item yang adaCheckBoxField menampilkan CheckBox untuk masing-masing item yang ada
CommandField Column yang disediakan untuk memilih / mengedit data
HyperlinkField menampilkan text yang berupa Hyperlink
ImageField menampilkan image yang berasal dari binary
TemplateField Column yang mengizinkan kita untuk melakukan Customize
yang ada dan dapat di buat menjadi template untuk nanti
digunakan kembali dan dapat menggabungkan beberapa Tipe
Column yang ada ke dalamnya.
Berikut adalah contoh menggunakannya, kita selipkan teks ini di dalam GridView , tambahkan Tag
Column dan kemudian tambahkan Field di dalam Column tersebut seperti berikut :
Oke , sekarang bila kita AutoGenerateColumn kita set TRUE , dan kita mencoba menambahkan 1 buah
BoundField / field yang berupa text pada GridView1 seperti pada contoh di atas apa yang akan terjadi ??
inilah yang data yang akan tampil dan terjadi !
5/25/2018 ASP.net Part 14 - DataControl
6/27
Dapat anda lihat bahwa kolom yang kita definisikan yaitu kolom dengan Header Text Katanya Nama
Barang akan muncul di sisi awal dari data yang di select , yup begitulah criteria data column yang kita
definisikan akan tampil di sisi paling awal dari data yang di select berdasarkan command pada hardcode
yang berasal dari select * from msbarang .
ada factor yang perlu di perhatikan yaitu dari DataBound Field untuk data yang di ambil kemudian di
tampilkan , pada properties DataBound yaitu DataField=NamaBarang , DataField ini merupakan nama
column yang mesti sama dengan nama column pada database , bilasudah mencoba column tidak
ditemukan maka akan menampilkan pesan kesalahan . yup2 kita sudah belajar sedikit untuk
menambahkan data column sederhana , beriku akan kita kembangkan ke tahap lebih lanjut , tapisebelum itu sebenarnya apa sih keuntungan dari tehnik ini ?
berikut keuntungannya :
1.Kita dapat dengan mudah melakukan perubahan pada column yang ada seperti mengatur column
order , column heading dan juga kita dapat customize dari semua sisi dan melakukan perubahan dan
membuat objek yang ditampilkan menjadi lebih detail dari sebelumnya
2.Kita dapat dengan mudah melakukan Hide dan Show column
3.Kita dapat melihat perubahan yang terjadi dari menu Design dari Visual Studio tanpa mesti melakukan
compile website tersebut pada browser untuk melihat hasilnya.
4.Kita dapat menambah extra kolom di dalamnya , baik untuk keperluan select , edit , direct ke halaman
lainnya dan banyak lagi.
5/25/2018 ASP.net Part 14 - DataControl
7/27
Oke sekarang kita akan maju selangkah lagi , intinya kita akan melakukan Control terhadap data yang
kita miliki apakah control yang akan kita lakukan terhadap data yang akan kita handle ?
1.Formatting : Mengatur tampilan Rows , column dan Data
2.Selecting : Memilih data yang ditampilkan berdasarkan Row pada GridView
3.Editing : Edit disini meliputi perubahan data yang terjadi seperti Insert , Update dan Delete
4.Sorting : Bagaimana kita mengatur tampilan data pada GridView secara dynamic terhadap response
user terhada urutan data yang ditampilkan
5.Paging : Mengatur jumlah data yang ditampilkan di halaman sisi depan GridView
6.Template : Melakukan Control dari design, format dan editing dengan mendefinisikan template
Style ,Formatting , Dan event pada DataGrid
Oke sekarang langsung ke Formatting. Kita dapat mengatur data yang tampil seperti tipe mata uang ,atau numeric maupun decimal dan integer . berikut contoh Numeric Format Strings dengan character C
mengindikasikan menggunakan $ ( dollar ) di depan dari karakter yang di definisikan , contoh 2500.50
akan menjadi $25000 .
dan berikut cara menerapkannya di dalam ASP:BoundField dengan format {0:C} :
Tapi kita lihat yang muncul , kita akan heran dan bingung kenapa bukan symbol Dollar di depan angka
yang ada melainkan angka Rp ??? berikut hasil yang tampil :
Hal ini bukanlah factor dari Visual Studio , kalau anda obrak-abrik dari Visual Studio saya tidak tahu
apakah emang dapat mengubah settingan ini , tapi dari beberapa referensi dan pengalaman yang saya
ketahui , ini adalah factor dari Regional Dan Language Setting pada Control Panel yang mesti kita ubah
manual seperti berikut :
5/25/2018 ASP.net Part 14 - DataControl
8/27
berikut merupakan Table dari Numeric Format Strings (table saya ambil dari MSDN) :
Character Description Examples Output
C or c Currency Console.Write("{0:C}", 2.5);
Console.Write("{0:C}", -2.5);
$2.50
($2.50)
D or d Decimal Console.Write("{0:D5}", 25); 00025
E or e Scientific Console.Write("{0:E}", 250000); 2.500000E+005
F or f Fixed-point Console.Write("{0:F2}", 25);
Console.Write("{0:F0}", 25);
25.00
25
G or g General Console.Write("{0:G}", 2.5); 2.5
N or n Number Console.Write("{0:N}", 2500000); 2,500,000.00
X or x Hexadecimal Console.Write("{0:X}", 250);
Console.Write("{0:X}", 0xffff);
FA
FFFF
Dan kemudian ada juga Timee and Date Format Strings seperti berikut :
( gambar saya ambil dari PDF pada referensi saya )
5/25/2018 ASP.net Part 14 - DataControl
9/27
berikut merupakan keterangan lebih jelas dari Date And Time Formatting :
(table saya ambil dari MSDN)
Format Name Description
General Date, or G Displays a date and/or time. For example, 4/ 3/ 93 05: 34 PM. Date display is
determined by your application's current culture value.
Long Date, MediumDate, or D
Displays a date according to your current culture's long date format.
Short Date, or d Displays a date using your current culture's short date format.
Long Time, Medium
Time, or T
Displays a time using your current culture's long time format; typically includes hours,
minutes, seconds.
Short Time, or t Displays a time using your current culture's short time format.
f Displays the long date and short time according to your current culture's format.
F Displays the long date and long time according to your current culture's format.
g Displays the short date and short time according to your current culture's format.
M, m Displays the month and the day of a date.
R, r Formats the date and time as Greenwich Mean Time (GMT).
s Formats the date and time as a sortable index.
u Formats the date and time as a GMT sortable index.
U Formats the date and time with the long date and long time as GMT.
Y, y Formats the date as the year and month.
5/25/2018 ASP.net Part 14 - DataControl
10/27
Yup2, setelah mempelajari Formatting Numeric and Date , sekarang kita akan belajar menggunakan
Styles dari GridView , biasanya kita menggunakan AutoFormat untuk lebih mudahnya , tetapi kali ini kita
akan mencoba mengaturnya secara manual .berikut GridView style :
Style Description
HeaderStyle Mengubah penampilan Header text dari Column ,
header dapat di tampilkan dengan ShowHeader =
true , atau dapat di hide
RowStyle Mengubah penampilan dari row yang ada
( semua row )
AlternatingRowStyle Mengatur tampilan dari RowStyle secara teratur,
seperti baris genap berwarna merah dan ganjil
berwarna biru.
SelectedRowStyle Mengatur tampilan dari Row yang sedang dipilih
EditRowStyle Mengatur penampilan dari Row yang sedang di
edit / sedang di ubah
EmptyDataRowStyle Mengubah style dari row yang tidak berisi data /
row yang kosong
FooterStyle Mengubah tampilan dari Footer atau bagian
bawah dari GridView , dapat di hidden dan di show
dengan mengubah property ShowFooter
PagerStyle Kita gunakan untuk mengatur jumlah tampilan row
yang akan tampil
Contoh Kita menampilkan dua data seperti berikut pada gridView :
gridView di atas akan memiliki tampilan seperti berikut :
5/25/2018 ASP.net Part 14 - DataControl
11/27
Dan kemudian ubah lah berdasarkan Style yang kita miliki , kita akan mengubah HeaderStyle
(NamaBarang dan HargaBarang ) dan mengubah Tampilan dari Isi data tersebut , berikut kita ubah
HeaderStyle dan RowStyle :
5/25/2018 ASP.net Part 14 - DataControl
12/27
Dan berikut hasil tampilan dari perubahan Code di atas :
Bila kita perhatikan , pada isi data dari row di atas akan mengalami perubahan style secara keseluruhan
pada isi data dan mengubah warnanya menjadi background abu2 dan textnya menjadi hitam semua.
Pertanyaannya bagaimana bila hanya kolom ke 2 saja yang ingin kita buat warnanya saja menjadi
berubah ? kita mesti ubah menjadi seperti berikut :
Kita mesti mengubah Column dari Single Line seperti berikut :
Menjadi seperti berikut :
Dan kemudian step terakhir kita tinggal menambahkan Style yang ingin kita ubah di dalam BoundFieldyang ada seperti berikut :
5/25/2018 ASP.net Part 14 - DataControl
13/27
Berikut adalah hasil tampilan dari Modifikasi di atas , saya harap anda sudah makin mengerti dengan
contoh yang ada.
Bila anda ingin memakai style yang sudah jadi dan memudahkan anda ya tinggal pilih Style dari
AutoFormat saja ^^. , dan kemudian saya ingin menambahkan sedikit modifikasi lagi bagaimana bila kita
ingin menampilkan Row yang memiliki harga lebih dari 5000 memiliki background warna kuning ??
Pasti bisa !!!!! kita akan menggunakan Event , atau kejadian apa yang terjadi , berikut adalah macam-
macam event pada GridView ( table saya ambil dari MSDN ) :
Event Description
PageIndexChanged Occurs when one of the pager buttons is clicked, but after the GridViewcontrol handles
the paging operation. This event is commonly used when you need to perform a taskafter the user navigates to a different page in the control.
PageIndexChanging Occurs when one of the pager buttons is clicked, but before the GridViewcontrolhandles the paging operation. This event is often used to cancel the paging operation.
RowCancelingEdit
Occurs when a row's Cancel button is clicked, but before the GridViewcontrol exits edit
mode. This event is often used to stop the canceling operation.
RowCommand Occurs when a button is clicked in the GridViewcontrol. This event is often used toperform a task when a button is cl icked in the control.
RowCreated Occurs when a new row is created in the GridViewcontrol. This event is often used tomodify the contents of a row when the row is created.
RowDataBound Occurs when a data row is bound to data in the GridViewcontrol. This event is often
used to modify the contents of a row when the row is bound to data.
RowDeleted Occurs when a row's Delete button is clicked, but after the GridViewcontrol deletes the
record from the data source. This event is often used to check the results of the deleteoperation.
RowDeleting Occurs when a row's Delete button is clicked, but before the GridViewcontrol deletesthe record from the data source. This event is often used to cancel the deletingoperation.
RowEditing Occurs when a row's Edit button is clicked, but before the GridViewcontrol enters editmode. This event is often used to cancel the editing operation.
RowUpdated
Occurs when a row's Update button is clicked, but after the GridViewcontrol updates
the row. This event is often used to check the results of the update operation.
5/25/2018 ASP.net Part 14 - DataControl
14/27
RowUpdating
Occurs when a row's Update button is clicked, but before the GridViewcontrol updatesthe row. This event is often used to cancel the updating operation.
SelectedIndexChanged Occurs when a row's Select button is clicked, but after the GridViewcontrol handlesthe select operation. This event is often used to perform a task after a row is selected inthe control.
SelectedIndexChanging Occurs when a row's Select button is clicked, but before the GridViewcontrol handlesthe select operation. This event is often used to cancel the selection operation.
Sorted Occurs when the hyperlink to sort a column is clicked, but after the GridViewcontrol
handles the sort operation. This event is commonly used to perform a task after theuser clicks a hyperlink to sort a column.
Sorting Occurs when the hyperlink to sort a column is clicked, but before the GridViewcontrolhandles the sort operation. This event is often used to cancel the sorting operation or toperform a custom sorting routine.
Dan balik ke pokok persoalan kita sebelumnya .bagaimana bila saya ingin menambahkan sedikit
modifikasi lagi bagaimana bila kita ingin menampilkan Row yang memiliki harga lebih dari 5000 memiliki
background warna kuning ?? yuppp . kita mesti memilih salah satu dari Event yang ada di atas , event
yang akan kita gunakan adalah Row Created , dimana kita akan mengganti warna background Data
tersebut ketika data itu di buat dan langsung di kalkulasi apa kah nilai melebih dari 5000 ketika form
ingin ditampilkan , bila lebih dari 5000 maka buat ketika di buat row baris tersebut sekalian ubah
background menjadi kuning .
RowCreated Occurs when a new row is created in the GridViewcontrol. This event is often used to modify thecontents of a row when the row is created.
Berikut adalah codenya dan designnya :
pr ot ect ed voi d Gr i dVi ew1_RowCr eated(Obj ect sender ,Gr i dVi ewRowEventAr gs e){i f ( e. Row. RowType == Dat aContr ol RowType. Dat aRow){deci mal har ga =
( deci mal ) DataBi nder . Eval ( e. Row. Dat aI t em, "Harga") ;i f ( har ga > 5000){e. Row. Cel l s[ 1] . BackCol or =Syst em. Dr awi ng. Col or . Yel l ow;e. Row. Cel l s[ 1]. BackCol or = Syst em. Dr awi ng. Col or . Red;e. Row. Cel l s[ 1] . Font . Bol d = true;e. Row. Cel l s[ 1] . Font . I t al i c = true;}}}
5/25/2018 ASP.net Part 14 - DataControl
15/27
Jangan lupa untuk menambahkan Event OnrowCreated pada sisi design GridView seperti berikut :
Select Data Pada DataGridKemudian sekarang kita akan mempelajari mengenai Select Data , kita akan melakukan Select Data
dengan ButtonField dan CommanField
Button type value Displays as
Button A button control.
Image
A button with an image.
Link A link.
Bila anda tidak mendefinisikan Button Type seperti di atas maka defaultnya dia akan menggunakan
ButtonType=link. Agar effect select muncul jangan lupa untuk menggunakan AutoFormat untuk
5/25/2018 ASP.net Part 14 - DataControl
16/27
melihat perubahan yang terjadi atau anda dapat merubah property yang ada ketika data di Select
seperti berikut ( bila anda tidak mengubah property data ketika di select , maka walaupun data terpilih
tidak aka nada data yang akan terlihat seperti di pilih ). Berikut property nya :
Tahukah anda bahwa DataGridView mempunyai property DataKeyNames , DataKeyNames ini istilahnya
dalam database adalah suatu Key Unik yang berada di dalam suatu Tabel / data yang ada , dan kita tidak
terbatas oleh 1 PK di dalam suatu table grid. Nah nantinya kita akan menggunakan 2 GridView ,
GridView1 akan menampilkan DataDistributor , dan GridView2 akan menampilkan DataBarang yang
memiliki KodeDistributor yang sama dengan KodeDistributor yang sama yang dipilih pada GridView1.
Berikut adalah rancangan yang akan kita buat seperti berikut :
Dapat kita lihat pada data yang ada kita menggunakan 2 GridView , GridView1(yg atas, untuk
menampilkan distributor) , GridView2( yg bawah untuk menampilkan data berdasarkan KdDistributor
pada GridView1).
catatan : GridView1 dengan HardCode dan GridView2 dengan SqlDataSource
5/25/2018 ASP.net Part 14 - DataControl
17/27
Oke berikut langsung kita kerjakan GridView 1 :
Berikut Design code dari GridView1 menggunakan AutoFormat dengan style Colorful :
Dan berikut adalah behind code untuk menampilkan distributor dari GridView1 :
publ i c par t i al cl ass Gr i dVi ew : Syst em. Web. UI . Page{
/ / mengambi l connect i on st r i ng dari Web. Conf i gpri vat e st r i ng Sur yoCon =
Conf i gur at i onManager . Connect i onSt r i ngs[ "Sur yoConnect i on" ] . Connect i onSt r i ng;/ / membuat obj ek Sql Dat aAdapterSql DataAdapter da ;/ / membuat obj ek Dat aSetDat aSet ds;/ / Membuat obj ek Sql Command
Sql Command com = new Sql Command( ) ;
pr ot ect ed voi d Page_Load( obj ect sender, Event Ar gs e){
/ / membuat koneksiSql Connect i on con = new Sql Connect i on( Sur yoCon) ;t ry{
/ / mengi si per i nt ah commandcom. CommandText = "sel ect * f r om msdi st ri but or " ;/ / mendef i ni si kan koneksi yang akan di gunakancom. Connect i on = con;/ / mel akukan eksekusi per i ntah dar i command
da = new Sql Dat aAdapter ( com) ;/ / membuat dataset untuk menyi mpan datads = new Dat aSet ( ) ;/ / menyi mpan data yang di sel ect ke dal am
/ / dat aset dengan nama Tabl es bar angda. Fi l l ( ds, "di st r i butor") ;/ / memi l i h datasour ce yang di gunakanGr i dVi ew1. DataSour ce = ds;/ / memi l i h DataMember dar i Tabl es pada dat aSetGr i dVi ew1. Dat aMember = "di str i butor" ;/ / mel akukan bi ndi ng unt uk menampi l kan dat aGr i dVi ew1. Dat aBi nd( ) ;/ / menut up koneksi
5/25/2018 ASP.net Part 14 - DataControl
18/27
con. Cl ose( ) ;}cat ch ( Except i on kesal ahan)
{ / / menampi l kan pesan kesal ahan yang adaMessageBox. Show( kesal ahan. ToSt r i ng( ) ) ;
}f i nal l y{
/ / menghapus koneksi yang adacon. Di spose( ) ;
}}
}
Berikut DataSource dari SqlDataSource untuk GridView2 , dapat kita lihat terdapa SelectCommand yangmelakukan selectData yang berasal dari parameter @KdDistributor , lalu dari mana parameter ini
berasal ??? kita menangkap parameter ini dengan ControlParameter yang menggunakan property Name
yang berasal dari nama Column data yang akan kita tangkap , dan dari control / komponen apakah
property itu ? bisa saja pada beberapa GridView memiliki property yang sama , karena itu kita mesti
mendefinisikan Controlid yang berasal dari GridView1, berikut contohnya :
Dan berikut adalah Connection String pada web.config :
Dan berikut adalah code design dari GridView2 :
5/25/2018 ASP.net Part 14 - DataControl
19/27
Okeh ! Sampai sini anda sudah bisa memainkan Style dan properties kemudian anda sudah dapat
melakukan select data pada GridView sendiri dan juga pada table lain ^^ , ayo2 semangat masih banyak
bahan kita ^^.
Edit data pada GridView
berikut kita akan melakukan Editting pada GridView , berikut adalah tampilan awal ketika menu di edit :
Dapat kita lihat di sana kita dapat mengubah 4 data yang ada , tapi dalam scenario kita hanya ingin
mengubah Nama Barang yang ada seperti gambar di bawah.
Jadi kita mesti melakukan sedikit modifikasi pada masing-masing column yang ada , untuk mengubah
property yang ada agar hanya NamaBarang yang dapat diubah dengan mengubah property ReadOnly
menjadi TRUE , berikut design codenya :
5/25/2018 ASP.net Part 14 - DataControl
20/27
5/25/2018 ASP.net Part 14 - DataControl
21/27
Updat eCommand="Updat e msbar ang set namabar ang= @namabar ang wher e
kdBar ang=@kdbar ang"
Sehingga menjadi seperti berikut :
Sekarang anda sudah dapat melakukan Select Data , pertanyaannya bagaimana Bila kita ingin Unselect
data yang di pilih ? anda dpat menggunakan HardCode , sample HardCode pada button1 :
pr ot ect ed voi d But t on1_Cl i ck(obj ect sender, Event Ar gs e){
Gr i dVi ew2. Sel ect edI ndex = - 1;}
Selamat sekarang anda sudah dapat melakukan Select Data berarti sudah beberapa point yang kita
pelajari disini , berikutnya kita akan mempelajari mengenai Sorting pada GridView
Sorting pada GridView
GridView juga support melakukan sorting untuk menampilkan data baik secara ascending atau
descending. Untuk dapat melakukan sorting pertama-tama set properties pada GridView yaitu ubah
properties Allow Sorting seperti berikut menjadi True seperti berikut :
5/25/2018 ASP.net Part 14 - DataControl
22/27
Normalnya semua Field yang kita miliki memiliki propertie seperti berikut
Dan kemudian setelah kita Generate Sorting akan memiliki Properties baru yaitu SortExpression,
SortExpression ini kita letakkan pada kolom yang ingin kita sorting , pada sisi HeaderText pada column
akan dapat kita klik dan melakukan sorting , untuk sorting sendiri dapat kita isi pada SortExpression mau
kita sorting berdasarkan column apa , contohnya seperti berikut kita dapat sorting pada masing2 kolom :
Berikut hasil dari tampilan di atas pada GridView
Dapat kita lihat bila pada sisi Header masing-masing memiliki Underline yang merupakan Sorting menu ,
tapi pada kasus kita bagaimana bila kita hanya ingin Sorting pada kolom KdBarang dan Nama Barang saja
? , yup2 jawabannya kita dapat menggunakan properties ReadOnly = true pada kolom yang tidak ingin
kita lakukan Sorting , jawabannya ya simple , hapus saja Tag SortExpression pada Design Code pada
column yang tidak ingin kita lakukan sorting ^^
Paging
Karena banyaknya data yang kita miliki , mustahil bagi kita untuk menampilkan data sekaligus dan ini
akan menjadi masalah lagi bila data hingga ratusan ribu bahkan lebih , karena itu kita gunakan paging
untuk membagi banyaknya data yang ditampilkan.
5/25/2018 ASP.net Part 14 - DataControl
23/27
Untuk Paging sendiri memiliki beberapa Properties seperti berikut :
Property Description
AllowPaging Kita gunakan untuk Enable / Disable Paging, defaultnya bernilai FALSEPageSize mengatur jumlah data dari item yang akan ditampilkan , defaultnya bernilai
10
Index Mengatur posisi Index (halaman ) yang pertama kali ketika Grid Di Load
PagerSetting Merupakan menu untuk mengatur Paging , seperti paging berada di sisi
bawah data atau di sisi atas data ,kemudian teks index halaman dapat berupa
numeric(angka) atau hanya berupa symbol seperti next data(>) atau prev
data(
5/25/2018 ASP.net Part 14 - DataControl
24/27
, Harga Bar ang =
Berikut tampilannya :
Kemudian kita modifikasi sedikit DataGridView yang telah kita buat tadi menjadi seperti berikut, kita
akan menggunakan OnRowCommand , dan kita akan memasukkan sebuah Button ke dalam Cell, dan
begitu Button tersebut di klik kita akan Menampilkan pesan NamaBarang yang di klik :
Next Data :
Foot Wow
Nama Barang :
, Harga Bar ang =
Berikut Event Row Command :
pr ot ect ed voi d Gr i dVi ew3_RowCommand( obj ect sender, Gr i dVi ewCommandEventArgs e){i f ( e. CommandName=="Cetak" )
5/25/2018 ASP.net Part 14 - DataControl
25/27
{MessageBox. Show( "Anda Mengkl i k Barang : " + e. CommandAr gument . ToSt r i ng( ) ) ;}
}
Oke setelah anda bisa melakukan itu , kita akan melakukan Customize lagi terhadap GridView yang kita
miliki menjadi, kita akan belajar bagaimana meletakkan control seperti textbox , DropDown atau list di
dalam GridView , tapi dalam contoh ini saya menaruh textbox pada GridView , dan disini saya
menerapkan AlternateITEM untuk data yang bertipe genap , missal , data 1 , 2 ,3 ,4 ,5 ,6 maka untuk
data mulai dari 2 , 4 , 6 dapat kita customize , disini saya hanya mengganti dengan text NextData saja.
Berikut Gambarnya :
Berikut design HTML na :
Next Data :
I D Bar ang =, Nama Barang :
, Harga Bar ang =
5/25/2018 ASP.net Part 14 - DataControl
26/27
Dapat kita lihat disana ada Bind dan Eval , apa perbedaanya ? Secara garis besar mereka sama2 dapat
menampilkan data , tetapi Eval OneWay dan Bind TwoWay yang dapat bolak balik arah untuk proses
insert ataupun update dan delete. Disini kita melakukan Update dengan Update yang berasal dari
UpdateCommand dari SqlDataSource
Simple bukan hanya sedikit sekali perubahan yang perlu kita lakukan.
Yup kita telah melakukan bsekali modifikasi pada GridView , dan untuk model DetailView dan FormView
tidak jauh berbeda cara memodifikasinya dengan GridView.
DetailView FormView
5/25/2018 ASP.net Part 14 - DataControl
27/27
Penutup
Tidak banyak kata saya sampaikan pada penutup kali ini . 3 Tips Dan Trik aja dari saya :
1.Terus Mencoba dan berpikir lah jernih agar lebih tenang dalam mengerjakan sesuatu !
2.Gunakan MSDN untuk membantu anda.
3.Googling untuk mencari referensi yang dapat membantu anda, karena pasti bukan hanya anda yang
pernah mengalami masalah ini , di jamin pasti ketemu dengan googling ^
Referensi :
MSDN 2008 http://msdn.microsoft.com http://wikipedia.com/
http://www.microsoft.com www.w3schools.com/ http://asp.net-tutorials.com/ Ebook : press.Beginning.ASP.NET.2.0.in.C.Sharp.2005
Biografi Penulis
M.Suryo Pranoto Alumni Mahasiswa Perguruan Tinggi
Universitas Bina Nusantara , Aktif dalam beberapa
komunitas komputer , dan beberapa project terutama
berbasis aplikasi seperti VB.Net atau C#,dan sedangberusaha keras untuk menabung dan berencana untuk
melanjutkan Cisco CCNP setelah menyelesaikan CCNA ,
memiliki hobby untuk sharing mengenai komputer mulai
dari software hingga jual beli hardware maupun modding
komputer.
Ym : suryolovetyka
Email : [email protected]
Website : www.suryodesign.asia
Blog : www.suryodesign.wordpress.com
Ilmu Komputer : http://ilmukomputer.org/author/suryodesign/