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 customerEdit = new DbNetEdit("customerEdit");
		with (customerEdit)
		{
			connectionString = "SamplesDatabase"
			fromPart = "Customers"
			setColumnExpressions("CustomerID","CompanyName","Address","City");
			setColumnProperty("CustomerID","primaryKey",true)
			parentFilterSql = ["1=2"]
			initialize()
		}			

		var orderEdit = new DbNetEdit("orderEdit");
		with (orderEdit)
		{
			connectionString = "SamplesDatabase"
			fromPart = "Orders"
			setColumnExpressions("OrderID","CustomerID","EmployeeID","OrderDate","RequiredDate","ShippedDate","ShipVia","Freight","ShipName","ShipAddress","ShipCity","ShipRegion","ShipPostalCode","ShipCountry");

			setColumnProperty("CustomerID", "foreignKey", true);
			setColumnProperty("EmployeeID", "lookup", "select employeeid, lastname + ',' + firstname from employees order by lastname,firstname");
			setColumnProperty("CustomerID", "lookup", "select customerid, companyname from customers");
			setColumnProperty("ShipVia", "lookup", "select shipperid, companyname from shippers");
			setColumnProperty("OrderID","primaryKey",true)
			parentFilterSql = ["1=2"]
			initialize()
		}
		
		var orderDetailsEdit = new DbNetEdit("orderDetailsEdit");
		with (orderDetailsEdit)
		{
			connectionString = "SamplesDatabase"
			fromPart = "[Order Details]"
			setColumnExpressions("OrderID","ProductID","UnitPrice","Quantity");

			setColumnProperty("OrderID","foreignKey",true)
			setColumnProperty("ProductID","editControlType","TextBoxLookup");
			setColumnProperty("ProductID","lookup","select productid, productname from products");
			parentFilterSql = ["1=2"]
			initialize()
		}

		var customersGrid = new DbNetGrid("customersGrid");
		with (customersGrid)
		{
			connectionString = "SamplesDatabase"
			fromPart = "customers"
			setColumnExpressions("CustomerID","CompanyName", "Address", "City");
			setColumnProperty("CustomerID", "display", false);
	
			bind("onRowSelected",selectEditTab)
			addNestedGrid( configireOrderGrid )
			addLinkedControl(customerEdit, true)
			initialize()
		}
	}

	function configireOrderGrid(grid)
	{
		with (grid)
		{
			fromPart = "orders"
			toolbarLocation = "hidden"
			setColumnExpressions("OrderID","CustomerID","EmployeeID","OrderDate");

			setColumnProperty("CustomerID", "foreignKey", true);
			setColumnProperty("EmployeeID", "lookup", "select employeeid, lastname + ',' + firstname from employees order by lastname,firstname");
			setColumnProperty("CustomerID", "lookup", "select customerid, companyname from customers");
			bind("onRowSelected",selectEditTab)
			addNestedGrid( configireOrderDetailsGrid )
			addLinkedControl( DbNetLink.components["orderEdit"], true)
		}
	}

	function configireOrderDetailsGrid(grid)
	{
		with (grid)
		{
			fromPart = "[order details]"
			toolbarLocation = "hidden"
			setColumnExpressions("OrderID","ProductID", "Quantity", "UnitPrice");
			setColumnProperty("OrderID", "foreignKey", true);
			setColumnProperty("ProductID", "lookup", "select productid, productname from products");
			bind("onRowSelected",selectEditTab)
			addLinkedControl(DbNetLink.components["orderDetailsEdit"], true)
		}
	}
	
	function selectEditTab(sender, args) {
		var tabIndex = 0;
		switch(sender.fromPart)
		{
			case "customers":
				tabIndex = 0;
				break;
			case "orders":
				tabIndex = 1;
				break;
			default:
				tabIndex = 2;
				break;
		}
		jQuery("#tabs").tabs( "select" , tabIndex );
	}
	</script>

HTML markup

	<table>
		<tr>
			<td style="vertical-align:top">
				<div id="customersGrid"></div>
			</td>
			<td style="vertical-align:top">
				<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"><div id="customerEdit"></div></div>
					<div id="tabs-2"><div id="orderEdit"></div></div>
					<div id="tabs-3"><div id="orderDetailsEdit"></div></div>
				</div>
			</td>
		</tr>
	</table>