Include the client JavaScript & CSS libraries

	<link rel="stylesheet" type="text/css" href="dbnetsuite.css.ashx" />
	<script language="JavaScript" src="dbnetsuite.js.ashx"></script>

Client-side configuration script

	<script>
	jQuery(document).ready( init )

	/////////////////////////////////////////
	function init()
	/////////////////////////////////////////
	{
		jQuery(".lookup-dialog").dialog({autoOpen:false,open:sizeDialog});
		jQuery(".lookup-dialog").find(".close-button").bind("click", closeDialog);
		jQuery(".lookup-dialog").find(".select-button").bind("click", selectCustomer);

		var ordersGrid = new DbNetGrid("ordersGrid");
		with (ordersGrid)
		{
			connectionString = "SamplesDatabase"
			fromPart = "orders"
			bind("onEditDialogInitialized", addCustomLookupButton)

			initialize()
		}

		var customersList = new DbNetList("customersList");
		with (customersList)
		{
			connectionString = "SamplesDatabase"
			width = "250px"
			height = "400px"
			sql = "select distinct country from customers where country is not null order by country"
			addNestedList( configureCityList )
			initialize()
		}
	}

	/////////////////////////////////////////
	function configureCityList(list)
	/////////////////////////////////////////
	{
		with (list)
		{
			sql = "select distinct city from customers where country = @country order by city"
			parameters = {"country" : "" };
			addNestedList( configureCustomersList )
		}
	}

	/////////////////////////////////////////
	function configureCustomersList(list)
	/////////////////////////////////////////
	{
		with (list)
		{
			sql = "select companyname, customerid from customers where city = @city order by companyname"
			parameters = {"city" : "" }
			rowSelection = true

			setColumnProperty("customerid","display",false)
		}
	}

	/////////////////////////////////////////
    function sizeDialog(event, ui)
	/////////////////////////////////////////
    {
        jQuery(event.target).dialog("option", "width", jQuery(event.target).children().width());
        jQuery(event.target).dialog("option", "position", "center");
    }

	/////////////////////////////////////////
	function addCustomLookupButton(control, args) {
	/////////////////////////////////////////
		var button = args.editControl.addInputControlButton('customerid');
		button.onclick = openDialog;
		var img = document.createElement("img");
		img.title = "Select customer";
		img.src = "../images/book.gif"
		jQuery(button).height(22)
		button.appendChild(img);
	}

	/////////////////////////////////////////
	function openDialog() {
	/////////////////////////////////////////
		jQuery(".lookup-dialog").dialog("open");
	}

	/////////////////////////////////////////
	function selectCustomer() {
	/////////////////////////////////////////
		var ordersGrid = DbNetLink.components["ordersGrid"];
		var customersList = DbNetLink.components["customersList"];

		customerId = customersList.selectedValue("customerid")

		if (customerId == null)
		{
			alert("Customer not selected")
			return;
		}
	
		ordersGrid.editDialog.editControl.setInputControlValue("customerid",customerId )

		jQuery(".lookup-dialog").dialog("close");
	}


	/////////////////////////////////////////
	function closeDialog() {
	/////////////////////////////////////////
		jQuery(".lookup-dialog").dialog("close");
	}
	</script>

HTML markup

	<div id="ordersGrid"></div>

	<div class="lookup-dialog" title="Customer Lookup" style="display:none">
		<div id="customersList" style="background-color:white"></div>
		<div>
			<div style="float:right"> 
				<button type="button" class="select-button">Select</button>
				<button type="button" class="cancel-button">Cancel</button>
			</div>
		</div>
	</div>