Blog Archives

Autocomplete Combobox VB.net

Combobox adalah control seleksi dengan daftar drop-down yang dapat ditampilkan atau disembunyikan dengan mengklik panah pada kontrol. Data yang ditampilkan biasanya yang sudah di tentukan atau dapat memasukkan nilai baru. Jika item yang ada di drop-down listnya sedikit, maka tidak begitu susah bagi user untuk memilih nilai yang ada. Tapi jika nilainya puluhan, bahkan ratusan, User akan kewalahan untuk memilih salah satu nilai yang ditampilkan. Dengan autocomplete combobox, user hanya perlu mengetik beberapa huruf saja, kemudian combobox akan menampilkan item-item yang nilainya mendekati yang diketikkan oleh user. Saya akan memberikan contoh simple autocomplete combobox dengan vb.net. 1. Create form spt dibawah ini.

AUTOCOMPLETE_FORM

AUTOCOMPLETE FORM

2. Create DataSet Click kanan Project name, Add New Item, pilih Data, klik DataSet, ketik DatasetComboBox.xsd pada field Name. di Server Explorer create new Connection, add Connection, masukkan server name. pilih “User Windows Autentication” untuk server local, jika servernya bukan lokal, pilih “User SQL Server Authentication” & masukkan user & passwordnya. Pilih Database “AdventureWorks”. Klik Tombol Test Connection, jika connection success, maka sudah terkoneksi dengan database.

ADD CONNECTION DATASET

ADD CONNECTION DATASET

Buka tab Window  Explorer & Dril down Table, Tarik ContryRegion ke layar Tengah

DATASET

Setting propertis combobox, klik kanan combobox, trus klik “properties”. Dril down DataSource, pilih “CountryRegionBindingSource”. Display Member pilih “Name”, Value Member pilih “CountryRegionCode”, AutoCompleteMode pilih “SuggestAppend”, AutoCompleteSource pilih “ListItems”.

COMBO_PROPERTIES

jika sudah selesai, tekan Ctrl + Shift + S (Save All), trus menu Debug -> Start Debuging atau F5. maka tampilannya akan spt ini:

AUTOCOMPLETE COMBOBOX

jika kita ketikkan huruf I, maka semua yang awalan I akan muncul di dropdown list, jadi kita tidak perlu terlalu panjang untuk menggeser ke atas/ bawah.

semoga tutorial ini bermanfaat.

Advertisements

Menampilkan data dari database ke dhmlxgrid

Menyambung dari posting terdahulu tentang customize component dengan javascript library, maka saya akan berikan contoh tentang component dhtmlx yang merupakan javascript library. Disini saya akan coba menampikan data ke dalam grid(dhtmlxgrid) dari database. Disini saya menggunakan database PHP + mysql. Mari kita mulai saja. Untuk librarinya dapat didownload di dhtmlx.
simple_grid_dhtmlx

Pertama-tama create terlebih dahulu halaman .htmlnya. Ini untuk membentuk component gridnya terlebih dahulu.





Grid DHTMLX















 
PENJUALAN PERANGKAT KOMPUTER
 
 
 
     
gridExample = new dhtmlXGridObject('gridExample'); gridExample.setImagePath("dhtmlxgrid/imgs/"); gridExample.setHeader("No,Kode Barang,Nama Barang,Harga,Quantity,Harga"); gridExample.setInitWidths("30,90,250,60,65,60"); gridExample.setColTypes("ro,ro,ro,ro,ro,ro"); gridExample.setColAlign("right,left,left,right,right,right"); gridExample.setEditable = "off"; gridExample.setSkin("light"); gridExample.loadXML('grid.php'); gridExample.init();

Pada baris ke 8,9,10,11 adalah javascript library & css yang dibutuhkan untuk componen grid dhmtmlx.
Pada baris ke 34, ada tag “div” yang id-nya “gridExample“. Pada prinsipnya javascript library yang ada cara kerjanya adalah
dengan memanipulasi tag- tags html yang ada. Disini, tag div gridExample akan dimanipulasi oleh dhtmlx menjadi sebuah grid dengan
menggunakan syntax pada line 44 sampai dengan 55.

Pada baris ke 45, tag div id “gridExample” akan dimanipulasi menjadi Grid. Baris 46, merupakan tempat directory image yang ada pada css-nya.
Baris 47, header dari grid yang akan dibuat, spilitnya adalah tanda koma “,“.
Baris 48, Lebar dari tiap- tiap header grid, jika dibuat otomatis, maka masukkan tanda bintang “*“.
Baris 49, Type baris pada grid, Terdiri dari ro(read only), txt(text/ bisa diinput), ed (text, bisa diedit), dll.
Baris 50, Align dari tiap tiap column.
Baris 51, Editable, column grid bisa diedit atau tidak.
Baris 52, Skin, type skin dari grid
Baris 53, url untuk mengisi data pada grid. Disini, format datanya adalah dalam bentuk xml.
Baris 54, membentuk / generate grid.

Kira kira seperti itulah penjelasannya.

Kemudian kita akan isi data ke grid dengan menggunakan format data xml. Penjelasan mengenai xml dapat dibaca disini.Disini saya berikan contoh, data langsung dari database mysql dengan menggunakan PHP.

<?php
        define(DB_HOST, 'localhost');
	define(DB_USER, 'root');
	define(DB_PASS, '');
	define(DB_NAME, 'test');

	$conn = mysql_connect(DB_HOST, DB_USER, DB_PASS)  or die('Tidak dapat terkoneksi dengan database');
	mysql_select_db(DB_NAME, $conn);

	$sql = "select * from penjualan ";

	$xml=""
			." ";
	$i=1;
	$result = mysql_query($sql, $conn) or die('TESSSS');
	while ($row = mysql_fetch_array($result)) {
		$xml.=""
				." ".$i.""
				." ".$row['kode_barang'].""
				." ".$row['nama_barang'].""
				." ".$row['harga'].""
				." ".$row['quantity'].""
				." ".$row['total'].""
				.""
				."";
		$i++;
	}
	$xml.="";

	sayXML($xml);

	function sayXML($xml_){
		if ( stristr($_SERVER["HTTP_ACCEPT"],"application/xhtml+xml") ){
			header("Content-type: application/xhtml+xml");
		}else{
			header("Content-type: text/xml");
		}

		$xml="\n";
		$xml.=$xml_;

		echo $xml;
	}
?>

Saya kira sekian dulu untuk penjelansannya, untuk source codenya secepatnya akan saya upload. So, stay tune..