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("#tabs").show();
		jQuery("#tabs").tabs();

		var orderDetailsForm = new DbNetEdit("orderDetailsForm");
		with (orderDetailsForm)
		{
			connectionString = "SamplesDatabase"
			fromPart = "[order details]"
			setColumnExpressions("OrderID","ProductID","UnitPrice","Quantity","Discount")

			setColumnProperty("OrderID","primaryKey", true)
			setColumnProperty("OrderID","foreignKey", true)
			setColumnProperty("OrderID","display", false)

			setColumnProperty("ProductID","primaryKey", true)

			setColumnProperty("ProductID","Lookup", "select productid, productname from products")
		}

		var ordersForm = new DbNetEdit("ordersForm");
		with (ordersForm)
		{
			connectionString = "SamplesDatabase"
			fromPart = "orders"

			setColumnExpressions("CustomerID","OrderID","OrderDate","RequiredDate","ShippedDate","Freight")
			setColumnProperty("CustomerID","display", false)
			setColumnProperty("CustomerID","foreignKey",true)
			setColumnProperty("OrderID","primaryKey",true)
		}

		var customersForm = new DbNetEdit("customersForm");
		with (customersForm)
		{
			connectionString = "SamplesDatabase"
			fromPart = "customers"

			setColumnExpressions("CustomerID","CompanyName","Address","City")
			setColumnProperty("CustomerID","primaryKey",true)
		}

		var orderDetailsGrid = new DbNetGrid("orderDetailsGrid");
		with (orderDetailsGrid)
		{
			connectionString = "SamplesDatabase"
			fromPart = "[order details]"
			pageSize = 5

			setColumnExpressions("OrderID","ProductID","UnitPrice","Quantity","Discount")
			setColumnProperty("ProductID","lookup","select productid, productname from products")
			setColumnProperty("Discount","format","p")
			setColumnProperty("OrderID","foreignKey",true)

			addLinkedControl(orderDetailsForm,true)
		}

		var ordersGrid = new DbNetGrid("ordersGrid");
		with (ordersGrid)
		{
			connectionString = "SamplesDatabase"
			fromPart = "orders"
			pageSize = 5

			bind("onRowSelected",updateTabHeader);

			setColumnExpressions("CustomerID","OrderID","OrderDate","RequiredDate")
			setColumnProperty("CustomerID","ForeignKey", true)

			addLinkedControl(orderDetailsGrid,false)
			addLinkedControl(ordersForm,true)
		}

		var customersGrid = new DbNetGrid("customersGrid");
		with (customersGrid)
		{
			connectionString = "SamplesDatabase"
			fromPart = "customers"
			pageSize = 5

			setColumnExpressions("companyname","city");

			addLinkedControl(ordersGrid,false)
			addLinkedControl(customersForm,true)
			bind("onRowSelected",updateTabHeader);

			initialize()
		}

	}

	function updateTabHeader(grid)
	{
		switch(grid.id)
		{
			case "customersGrid":
				jQuery("a[href=#tabs-2]").html("Orders [" + grid.columnValue("companyname") + "]")
				break;
			case "ordersGrid":
				var formattedDate = jQuery.datepicker.formatDate('yy-mm-dd',grid.columnValue("OrderDate"));
				jQuery("a[href=#tabs-3]").html("Order Details [" + formattedDate + "]");
				break;
		}
	}
	</script>

HTML markup

    <div id="tabs" style="display:none">
	    <ul>
	        <li><a href="#tabs-1">Customers</a></li>
		    <li><a href="#tabs-2">Orders</a></li>
		    <li><a href="#tabs-3">Order Details</a></li>
	    </ul>
        <div id="tabs-1" class="tabContent""> 
			<div style="float:left">
				<div id="customersGrid"></div>
			</div>
			<div style="float:left" class="editContainer">
				<div id="customersForm"></div>
			</div>
        </div>
        <div id="tabs-2" class="tabContent">
			<div style="float:left">
				<div id="ordersGrid"></div>
			</div>
			<div style="float:left" class="editContainer">
				<div id="ordersForm"></div>
			</div>
		</div>
        <div id="tabs-3" class="tabContent">
			<div style="float:left">
				<div id="orderDetailsGrid"></div>
			</div>
			<div style="float:left" class="editContainer">
				<div id="orderDetailsForm"></div>
			</div>
		</div>
    </div>

CSS

	<style>
		div.tabContent
		{
			height:200px;
			vertical-align:top;
		}
		div.editContainer
		{
			margin-left:20px;
			padding-left:20px;
			border-left:1pt solid silver;
		}
	</style>