asp.net part 14 - datacontrol

5/25/2018 ASP.net Part 14 - DataControl

1/27

Part 14 DataControl

M.Suryo Pranoto

[email protected]

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.


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;


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 :


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/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 !


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.


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 :


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 )


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.


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 :


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 :


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 :


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.


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;}}}


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


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


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


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 :


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 :


20/27


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 :


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.


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(


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" )


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 =


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


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/

asp.net part 14 - datacontrol

Documents

ketahui secara garis

pemilihan data row selection6

dipakai untuk menampilkan

kemampuan binding data

isiberikut rich data

mencoba untuk membuat

untuk melakukan kombinasi

multiple key fields8