Part 14 – DataControl

M.Suryo Pranoto suryodesign@yahoo.co.id 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.

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 SqlDataSource 2.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 :

public partial class GridView : System.Web.UI.Page { //mengambil connection string dari Web.Config private string SuryoCon = ConfigurationManager.ConnectionStrings["SuryoConnection"].ConnectionString; //membuat objek SqlDataAdapter SqlDataAdapter da ; //membuat objek DataSet DataSet ds;

//Membuat objek SqlCommand SqlCommand com = new SqlCommand(); }

Kemudian ketika halaman load buat perintah hardcode untuk mengisi data ke GridView1 :

protected void Page_Load(object sender, EventArgs e) { //membuat koneksi SqlConnection con = new SqlConnection(SuryoCon); try { //mengisi perintah command com.CommandText = "select * from msbarang"; //mendefinisikan koneksi yang akan digunakan com.Connection = con; //melakukan eksekusi perintah dari command da = new SqlDataAdapter(com); //membuat dataset untuk menyimpan data ds = new DataSet(); //menyimpan data yang di select ke dalam //dataset dengan nama Tables barang da.Fill(ds, "barang"); //memilih datasource yang digunakan GridView1.DataSource = ds; //memilih DataMember dari Tables pada dataSet GridView1.DataMember = "barang"; //melakukan binding untuk menampilkan data GridView1.DataBind(); //menutup koneksi con.Close(); } catch (Exception kesalahan) { //menampilkan pesan kesalahan yang ada MessageBox.Show(kesalahan.ToString()); } finally { //menghapus koneksi yang ada con.Dispose(); } }

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 :

<asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString= "<%$ ConnectionStrings:SuryoConnection %>" SelectCommand="select * from msbarang"> </asp:SqlDataSource>

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 DataSource yang akan kita gunakan, pilih SQLDataSource1 yang akan digunakan , ata anda dapat menggantinya melalui code dari GridView seperti berikut :

<asp:GridView ID="GridView2" runat="server" DataSourceID="SqlDataSource1"> </asp:GridView>

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.

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 ada CheckBoxField 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 :

<asp:GridView ID="GridView1" runat="server"> <Columns> <asp:BoundField DataField="NamaBarang" HeaderText="Katanya Nama Barang" /> </Columns> </asp:GridView>

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 !

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 , tapi sebelum 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.

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}” : <asp:BoundField DataField="Harga" DataFormatString="{0:C}" HeaderText="Harga Barang" /> </Columns> </asp:GridView>

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 :

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 )

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, Medium Date, 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.

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 :

<asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="false"> <Columns> <asp:BoundField DataField="NamaBarang" HeaderText="Nama Barang" /> <asp:BoundField DataField="Harga" DataFormatString="{0:C}" HeaderText="Harga Barang" /> </Columns> </asp:GridView>

gridView di atas akan memiliki tampilan seperti berikut :

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 :

<asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="false"> <RowStyle BackColor="Gray" ForeColor="Black" /> <HeaderStyle BackColor="BlueViolet" Font-Bold="true" ForeColor="HotPink" /> <Columns> <asp:BoundField DataField="NamaBarang" HeaderText="Nama Barang" /> <asp:BoundField DataField="Harga" DataFormatString="{0:C}" HeaderText="Harga Barang" /> </Columns> </asp:GridView>

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 :

<asp:BoundField DataField="Harga" DataFormatString="{0:C}" HeaderText="Harga Barang" />

Menjadi seperti berikut :

<asp:BoundField DataField="Harga" DataFormatString="{0:C}" HeaderText="Harga Barang" ></asp:BoundField>

Dan kemudian step terakhir kita tinggal menambahkan Style yang ingin kita ubah di dalam BoundField yang ada seperti berikut :

<asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="false"> <Columns> <asp:BoundField DataField="NamaBarang" HeaderText="Nama Barang" /> <asp:BoundField DataField="Harga" DataFormatString="{0:C}" HeaderText="Harga Barang" > <ItemStyle BackColor="Gray" ForeColor="Black" /> <HeaderStyle BackColor="BlueViolet" Font-Bold="true" ForeColor="HotPink" /> </asp:BoundField> </Columns> </asp:GridView>

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 GridView control handles the paging operation. This event is commonly used when you need to perform a task after the user navigates to a different page in the control.

PageIndexChanging Occurs when one of the pager buttons is clicked, but before the GridView control handles 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 GridView control exits edit mode. This event is often used to stop the canceling operation.

RowCommand Occurs when a button is clicked in the GridView control. This event is often used to perform a task when a button is clicked in the control.

RowCreated Occurs when a new row is created in the GridView control. This event is often used to modify the contents of a row when the row is created.

RowDataBound Occurs when a data row is bound to data in the GridView control. 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 GridView control deletes the record from the data source. This event is often used to check the results of the delete operation.

RowDeleting Occurs when a row's Delete button is clicked, but before the GridView control deletes the record from the data source. This event is often used to cancel the deleting operation.

RowEditing Occurs when a row's Edit button is clicked, but before the GridView control enters edit mode. This event is often used to cancel the editing operation.

RowUpdated Occurs when a row's Update button is clicked, but after the GridView control updates the row. This event is often used to check the results of the update operation.

RowUpdating Occurs when a row's Update button is clicked, but before the GridView control updates the row. This event is often used to cancel the updating operation.

SelectedIndexChanged Occurs when a row's Select button is clicked, but after the GridView control handles the select operation. This event is often used to perform a task after a row is selected in the control.

SelectedIndexChanging Occurs when a row's Select button is clicked, but before the GridView control handles the 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 GridView control handles the sort operation. This event is commonly used to perform a task after the user clicks a hyperlink to sort a column.

Sorting Occurs when the hyperlink to sort a column is clicked, but before the GridView control handles the sort operation. This event is often used to cancel the sorting operation or to perform 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 GridView control. This event is often used to modify the contents of a row when the row is created.

Berikut adalah codenya dan designnya :

protected void GridView1_RowCreated(Object sender, GridViewRowEventArgs e) { if (e.Row.RowType == DataControlRowType.DataRow) { decimal harga = (decimal)DataBinder.Eval(e.Row.DataItem, "Harga"); if (harga > 5000) { e.Row.Cells[1].BackColor = System.Drawing.Color.Yellow; e.Row.Cells[1].BackColor = System.Drawing.Color.Red; e.Row.Cells[1].Font.Bold = true; e.Row.Cells[1].Font.Italic = true; } } }

Jangan lupa untuk menambahkan Event OnrowCreated pada sisi design GridView seperti berikut :

<asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="false" OnRowCreated="GridView1_RowCreated" onselectedindexchanged="GridView1_SelectedIndexChanged" > <Columns> <asp:BoundField DataField="NamaBarang" HeaderText="Nama Barang" /> <asp:BoundField DataField="Harga" DataFormatString="{0:C}" HeaderText="Harga Barang" > <ItemStyle BackColor="Gray" ForeColor="Black" /> <HeaderStyle BackColor="BlueViolet" Font-Bold="true" ForeColor="HotPink" /> </asp:BoundField> </Columns> </asp:GridView>

Select Data Pada DataGrid

Kemudian 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.

<asp:CommandField ShowSelectButton="true" ButtonType="Link" /> <asp:CommandField ShowSelectButton="true" ButtonType="Button" SelectText="Pilih" /> <asp:CommandField ShowSelectButton="true" ButtonType="Image" SelectImageUrl="~/menu_11.gif" />

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

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 :

<SelectedRowStyle BackColor="#FFCC66" Font-Bold="True" ForeColor="Navy" />

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

Oke berikut langsung kita kerjakan GridView 1 : Berikut Design code dari GridView1 menggunakan AutoFormat dengan style Colorful :

<asp:GridView ID="GridView1" runat="server" CellPadding="4" ForeColor="#333333" DataKeyNames="KdDistributor"GridLines="None" > <FooterStyle BackColor="#990000" Font-Bold="True" ForeColor="White" /> <RowStyle BackColor="#FFFBD6" ForeColor="#333333" /> <Columns> <asp:CommandField ShowSelectButton="True" /> </Columns> <PagerStyle BackColor="#FFCC66" ForeColor="#333333" HorizontalAlign="Center" /> <SelectedRowStyle BackColor="#FFCC66" Font-Bold="True" ForeColor="Navy" /> <HeaderStyle BackColor="#990000" Font-Bold="True" ForeColor="White" /> <AlternatingRowStyle BackColor="White" /> </asp:GridView>

Dan berikut adalah behind code untuk menampilkan distributor dari GridView1 :

public partial class GridView : System.Web.UI.Page { //mengambil connection string dari Web.Config private string SuryoCon = ConfigurationManager.ConnectionStrings["SuryoConnection"].ConnectionString; //membuat objek SqlDataAdapter SqlDataAdapter da ; //membuat objek DataSet DataSet ds; //Membuat objek SqlCommand SqlCommand com = new SqlCommand(); protected void Page_Load(object sender, EventArgs e) { //membuat koneksi SqlConnection con = new SqlConnection(SuryoCon); try { //mengisi perintah command com.CommandText = "select * from msdistributor"; //mendefinisikan koneksi yang akan digunakan com.Connection = con; //melakukan eksekusi perintah dari command da = new SqlDataAdapter(com); //membuat dataset untuk menyimpan data ds = new DataSet(); //menyimpan data yang di select ke dalam //dataset dengan nama Tables barang da.Fill(ds, "distributor"); //memilih datasource yang digunakan GridView1.DataSource = ds; //memilih DataMember dari Tables pada dataSet GridView1.DataMember = "distributor"; //melakukan binding untuk menampilkan data GridView1.DataBind(); //menutup koneksi

con.Close(); } catch (Exception kesalahan) { //menampilkan pesan kesalahan yang ada MessageBox.Show(kesalahan.ToString()); } finally { //menghapus koneksi yang ada con.Dispose(); } } }

Berikut DataSource dari SqlDataSource untuk GridView2 , dapat kita lihat terdapa SelectCommand yang melakukan 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 :

<asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString= "<%$ ConnectionStrings:SuryoConnection %>" SelectCommand="select * from msbarang where KdDistributor = @KdDistributor"> <SelectParameters> <asp:ControlParameter Name="KdDistributor" ControlID="GridView1" PropertyName="SelectedDataKey.value" /> </SelectParameters> </asp:SqlDataSource>

Dan berikut adalah Connection String pada web.config :

<connectionStrings> <add name="SuryoConnection" connectionString="Data Source=SURYSTUDIO-PC\SQLEXPRESS;Initial Catalog=SQL2005;Integrated Security=True"/> </connectionStrings>

Dan berikut adalah code design dari GridView2 :

<asp:GridView ID="GridView2" runat="server" AutoGenerateColumns="False" DataSourceID="SqlDataSource1" DataKeyNames="KdBarang" CellPadding="4" ForeColor="#333333" GridLines="None" > <FooterStyle BackColor="#5D7B9D" Font-Bold="True" ForeColor="White" /> <RowStyle BackColor="#F7F6F3" ForeColor="#333333" /> <Columns> <asp:CommandField ShowSelectButton="True" /> <asp:BoundField DataField="KdBarang" HeaderText="KdBarang" InsertVisible="False" ReadOnly="True" SortExpression="KdBarang" /> <asp:BoundField DataField="NamaBarang" HeaderText="NamaBarang" SortExpression="NamaBarang" /> <asp:BoundField DataField="Stok" HeaderText="Stok" SortExpression="Stok" />

<asp:BoundField DataField="Harga" HeaderText="Harga" SortExpression="Harga"/> <asp:BoundField DataField="KdDistributor" HeaderText="KdDistributor" SortExpression="KdDistributor" /> </Columns> <PagerStyle BackColor="#284775" ForeColor="White" HorizontalAlign="Center" /> <SelectedRowStyle BackColor="#E2DED6" Font-Bold="True" ForeColor="#333333" /> <HeaderStyle BackColor="#5D7B9D" Font-Bold="True" ForeColor="White" /> <EditRowStyle BackColor="#999999" /> <AlternatingRowStyle BackColor="White" ForeColor="#284775" /> </asp:GridView>

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 :

<asp:BoundField DataField="Stok" HeaderText="Stok" SortExpression="Stok" ReadOnly="true" />

<asp:BoundField DataField="Harga" HeaderText="Harga" SortExpression="Harga" ReadOnly="true" /> <asp:BoundField DataField="KdDistributor" HeaderText="KdDistributor" ReadOnly="true"

Tambahkan Link pada design GridView2 untuk Edit Data dengan CommandField yang memiliki property ShowEditButton

<asp:CommandField ShowEditButton="true" />

Property ini dapat kita ubah juga melalu Wizard tetapi bila GridView anda tampilkan data dengan HardCode maka menu Enable Editting ini tidak akan muncul tetapi bila anda menggunakan DataSource seperti SqlDataSource maka menu ini akan muncul , Berikut Contoh GridView1 dengan Hardcode yang tidak memiliki menu enable editing , dan GridView2 yang memiliki menu Enable Editting yang menggunakan SqlDataSource : catatan : Ini merupakan menu dengan wizard dan kita tidak melakukan Step ini karena kita mendefinisikan manual tanpa bantuan wizard, disini saya hanya member contoh. Picture GridView1 :

Picture GridView2 :

Kemudian modifikasi SqlDatasource dengan UpdateCommand , perhatikan disini kita menggunakan parameter NamaBarang yang akan di update, tambahkan UpdateComman berikut pada SqlDataSource

UpdateCommand="Update msbarang set namabarang= @namabarang where kdBarang=@kdbarang"

Sehingga menjadi seperti berikut :

<asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString= "<%$ ConnectionStrings:SuryoConnection %>" SelectCommand="select * from msbarang where KdDistributor = @KdDistributor" UpdateCommand="Update msbarang set namabarang= @namabarang where kdBarang=@kdbarang"> <SelectParameters> <asp:ControlParameter Name="KdDistributor" ControlID="GridView1" PropertyName="SelectedDataKey.value" /> </SelectParameters> </asp:SqlDataSource>

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 :

protected void Button1_Click(object sender, EventArgs e) { GridView2.SelectedIndex = -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 :

Normalnya semua Field yang kita miliki memiliki propertie seperti berikut <asp:BoundField DataField="KdBarang" HeaderText="KdBarang" InsertVisible="True" ReadOnly="True" /> <asp:BoundField DataField="NamaBarang" HeaderText="NamaBarang" /> <asp:BoundField DataField="Stok" HeaderText="Stok" ReadOnly="true" /> <asp:BoundField DataField="Harga" HeaderText="Harga" ReadOnly="true" /> <asp:BoundField DataField="KdDistributor" HeaderText="KdDistributor" ReadOnly="true"/>

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 : <asp:BoundField DataField="KdBarang" HeaderText="KdBarang" InsertVisible="True" ReadOnly="True" SortExpression="KdBarang" /> <asp:BoundField DataField="NamaBarang" HeaderText="NamaBarang" SortExpression="NamaBarang" /> <asp:BoundField DataField="Stok" HeaderText="Stok" ReadOnly="true" SortExpression="Stok" /> <asp:BoundField DataField="Harga" HeaderText="Harga" ReadOnly="true" SortExpression="Harga" /> <asp:BoundField DataField="KdDistributor" HeaderText="KdDistributor" ReadOnly="true" SortExpression="KdDistributor" />

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.

Untuk Paging sendiri memiliki beberapa Properties seperti berikut :

Property Description AllowPaging Kita gunakan untuk Enable / Disable Paging, defaultnya bernilai “FALSE” PageSize 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(<)

PagerStyle Untuk mengubah fonts , colors dan textAlignment PageIndexChangedEvent Event yang terjadi ketika Page Selection di klik

Untuk dapat menggunakan paging , pertama kita mesti mengaktifkan AllowPaging menjadi TRUE seperti berikut :

Kemudian anda dapat atur PageSize sebanyak data yang ditampilkan dan properties lainnya , Cukup mudah bukan untuk menggunakan Paging ? anda dapat melakukan PagerSetting dan PagerStyle hingga menemukan properties sesuai keinginan anda ^^.

Using GridView Templates

Sejauh ini untuk menampilkan data kita menggunakan BoundField untuk menampilkan data pada setiap kolomnya , tetapi kita juga dapat menggukan TemplateField untuk mencetak data dengan multiple values pada cell yang sama , dan kita dapat lebih leluasa melakukan customize dengan menambahkan HTML tags dan server control.

Berikut merupakan contoh untuk mencetak data nama barang dan harga barang pada satu kolom dan kita mencetak Data berdasarkan Nama / Field yang deselect pada SqlDataSource :

<asp:GridView ID="GridView3" runat="server" autogeneratecolumns="False" DataSourceID="SqlDataSource2"> <columns> <asp:templatefield headertext="Author Name"> <itemtemplate> Nama Barang : <b> <asp:label id="LabelNama" Text= '<%# Eval("NamaBarang") %>' runat="server"/> </b>

, Harga Barang = <%# Eval("Harga") %> </itemtemplate> </asp:templatefield> </columns> </asp:GridView>

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 :

<asp:GridView ID="GridView3" runat="server" autogeneratecolumns="False" OnRowCommand="GridView3_RowCommand" DataSourceID="SqlDataSource2"> <columns> <asp:templatefield headertext="Author Name"> <AlternatingItemTemplate> Next Data : </AlternatingItemTemplate> <FooterTemplate> Foot Wow </FooterTemplate> <itemtemplate> Nama Barang : <b> <asp:label id="LabelNama" Text= '<%# Eval("NamaBarang") %>' runat="server"/> </b> , Harga Barang = <%# Eval("Harga") %> <asp:ImageButton ID="ImageButton1" runat="server" ImageUrl="~/menu_11.gif" CommandName="Cetak" CommandArgument='<%# Eval("NamaBarang") %>' /> </itemtemplate> </asp:templatefield> </columns> </asp:GridView>

Berikut Event Row Command :

protected void GridView3_RowCommand(object sender,GridViewCommandEventArgs e) { if (e.CommandName=="Cetak")

{ MessageBox.Show("Anda Mengklik Barang : " + e.CommandArgument.ToString()); } }

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 :

<asp:GridView ID="GridView3" runat="server" autogeneratecolumns="False" OnRowCommand="GridView3_RowCommand" DataSourceID="SqlDataSource2" AutoGenerateEditButton="True"> <columns> <asp:templatefield headertext="Author Name"> <AlternatingItemTemplate> Next Data : </AlternatingItemTemplate> <itemtemplate> ID Barang = <asp:TextBox Text='<%# Eval("KdBarang") %>' ID="KdBarang" Width="50px" runat="server" Enabled="false" /> , Nama Barang : <b> <asp:label ID="LabelNama" Text= '<%# Eval("NamaBarang") %>' runat="server"/> </b> , Harga Barang = <asp:TextBox Text='<%# Bind("Harga") %>' ID="IdHarga" Width="50px" runat="server" />

<asp:ImageButton ID="ImageButton1" runat="server" ImageUrl="~/menu_11.gif" CommandName="Cetak" CommandArgument='<%# Eval("NamaBarang") %>' /> </itemtemplate> </asp:templatefield> </columns> </asp:GridView>

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

<asp:SqlDataSource ID="SqlDataSource2" runat="server" ConnectionString= "<%$ ConnectionStrings:SuryoConnection %>" SelectCommand="select * from msbarang " UpdateCommand="Update MsBarang Set Harga=@Harga where NamaBarang = 'gigi1'" > </asp: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

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 sedang berusaha 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 : suryodesign@yahoo.co.id Website : www.suryodesign.asia Blog : www.suryodesign.wordpress.com Ilmu Komputer : http://ilmukomputer.org/author/suryodesign/