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", selectCategory);

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

			setColumnProperty("categoryid","lookup","select categoryid, categoryname from categories");
			setColumnProperty("supplierid","lookup","select supplierid, companyname from suppliers");
			initialize()
		}

		var categoriesGrid = new DbNetGrid("categoriesGrid");
		with (categoriesGrid)
		{
			connectionString = "SamplesDatabase"
			fromPart = "categories"
			width = "600px"
			height = "200px"
			insertRow = true
			updateRow = false
			deleteRow = false
			editDialog.closeOnApply = true;

			bind("onRecordInserted",refreshCategoryList)
			initialize()
		}

	}

	/////////////////////////////////////////
	function refreshCategoryList(control, args) {
	/////////////////////////////////////////
		DbNetLink.components["productsGrid"].editDialog.editControl.refreshListOptions("categoryid");
	}

	/////////////////////////////////////////
    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('categoryid');
		button.onclick = openDialog;
		var img = document.createElement("img");
		img.title = "Select category";
		img.src = "../images/book.gif"
		jQuery(button).height(22)
		button.appendChild(img);
	}

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

	/////////////////////////////////////////
	function selectCategory() {
	/////////////////////////////////////////
		var categoriesGrid = DbNetLink.components["categoriesGrid"];
		var productsGrid = DbNetLink.components["productsGrid"];

		categoryId = categoriesGrid.selectedRows()[0].getAttribute("id")
	
		productsGrid.editDialog.editControl.setInputControlValue("categoryid",categoryId )

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


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

HTML markup

	<div id="productsGrid"></div>

	<div class="lookup-dialog" title="Category Lookup" style="display:none">
		<div id="categoriesGrid" style="width:600px"></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>