Include the client JavaScript & CSS libraries

	<link rel="stylesheet" type="text/css" href="dbnetsuite.css.ashx" />
	<script language="JavaScript" src="dbnetsuite.js.ashx"></script>
	<script src="../../samples/tinyMCE/jscripts/tiny_mce/tiny_mce.js"></script>
	<style>
		.ui-accordion-header.ui-state-active a {border-bottom:1pt solid silver;}
	</style>

Client-side configuration script

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

	function init()
	{
		jQuery("#accordion1").show();
		jQuery("#accordion1").accordion();
		jQuery("#accordion2").show();
		jQuery("#accordion2").accordion();

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

			setColumnProperty("OrderID", "foreignKey", true);
			setColumnProperty("ProductID", "lookup", "select productid, productname from products");
		}
		
		var dbnetgrid2 = new DbNetGrid("dbnetgrid2");
		with (dbnetgrid2)
		{
			connectionString = "SamplesDatabase"
			fromPart = "orders"
			setColumnExpressions("OrderID","CustomerID","EmployeeID","OrderDate","RequiredDate","ShippedDate","ShipVia","Freight");
			height = "300px"
			setColumnProperty("CustomerID", "display", false);
			setColumnProperty("EmployeeID", "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");
			addLinkedControl( dbnetgrid3 )
		}

		var dbnetedit1 = new DbNetEdit("dbnetedit1");
		with (dbnetedit1)
		{
			connectionString = "SamplesDatabase"
			fromPart = "Employees"

			setColumnProperty("notes","editControlType","Html");
			addLinkedControl( dbnetgrid2 )
			initialize()
		}

	}
	</script>

HTML markup

    <table style="width:600px;float:left" id="dbnetedit1">
		<tr>
			<td>
				<div id="accordion1" style="display:none">
					<h3><a href="#">Name</a></h3>
					<div class="content">
						<table>
							<tr>
								<td>Title</td>
								<td><span ColumnExpression="TitleOfCourtesy"/></td>
							</tr>
							<tr>
								<td>First Name</td>
								<td><span ColumnExpression="FirstName" /></td>
							</tr>
							<tr>
								<td>Last Name</td>
								<td><span ColumnExpression="LastName" /></td>
							</tr>
							<tr style="display:none;">
								<td>Employee ID</td>
								<td><span ColumnExpression="EmployeeID" /></td>
							</tr>
						</table>
					</div>
					<h3><a href="#">Address</a></h3>
					<div class="content">
						<table>
							<tr>
								<td>Address</td>
								<td><span ColumnExpression="Address" /></td>
							</tr>
							<tr>
								<td>City</td>
								<td><span ColumnExpression="City" /></td>
							</tr>
							<tr>
								<td>Region</td>
								<td><span ColumnExpression="Region" /></td>
							</tr>
							<tr>
								<td>Post Code</td>
								<td><span ColumnExpression="PostalCode" /></td>
							</tr>
							<tr>
								<td>Country</td>
								<td><span ColumnExpression="Country" /></td>
							</tr>
						</table>
					</div>
					<h3><a href="#">Employment</a></h3>
					<div class="content">
						<table>
							<tr>
								<td>Title</td>
								<td><span ColumnExpression="Title" /></td>
							</tr>
							<tr>
								<td>Hire Date</td>
								<td><span ColumnExpression="HireDate" /></td>
							</tr>
						</table>
					</div>
					<h3><a href="#">Photo</a></h3>
					<div class="content">
						<table>
							<tr>
								<td><span ColumnExpression="Photo" MaxThumbnailHeight="100" /></td>
							</tr>
						</table>
					</div>
					<h3><a href="#">Notes</a></h3>
					<div class="content">
						<table>
							<tr>
								<td><span width="500px" height="120px" EditControlType="Html" ColumnExpression="Notes" /></td>
							</tr>
						</table>
					</div>    
				</div>
				<div>
					<table style="width:100%">
						<tr>
							<td ID="dbnetedit1_toolbarPanel"></td>
						</tr>
						<tr>
							<td ID="dbnetedit1_messagePanel"></td>
						</tr>
					</table>
				</div>
			</td>
		</tr>
    </table>

    <table style="width:600px;float:left">
		<tr>
			<td>
				<div id="accordion2" style="display:none">
					<h3><a href="#">Employee Orders</a></h3>
					<div class="content">
						<div id="dbnetgrid2" style="height:400px"></div>
					</div>
					<h3><a href="#">Employee Order Details</a></h3>
					<div class="content">
						<div id="dbnetgrid3" style="height:400px"></div>
					</div>
				</div>

			</td>
		</tr>
    </table>