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>

Client-side configuration script

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

	function init()
	{
		jQuery("#tabs").show();
		jQuery("#tabs").tabs();
		jQuery(".employee-edit-dialog").dialog({autoOpen:false, open:DbNetLink.Util.sizeDialog});

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

			setColumnProperty("notes","editControlType","Html");
		}
		
		var dbnetgrid1 = new DbNetGrid("dbnetgrid1");
		with (dbnetgrid1)
		{
			connectionString = "SamplesDatabase"
			fromPart = "employees"
			setColumnExpressions("firstname","lastname","ReportsTo")
			setColumnProperty("ReportsTo","Lookup","select EmployeeID, LastName + ', ' + FirstName from Employees order by LastName,FirstName")
			bind('onInitialized', initForm);

			addLinkedControl(dbnetedit1,true);
			initialize()
		}	
		
		function initForm(control)
		{
			var btn = jQuery(control.addToolbarButton(1));
			btn.text( "Update");
			btn.click( updateRecord );
		}		

		function updateRecord()
		{
			jQuery(".employee-edit-dialog").dialog("open");
		}			
	}
	</script>

HTML markup

	<div id="dbnetgrid1"></div>
	<div class="employee-edit-dialog" style="display:none" title="Employee Update">
		<table style="width:600px" id="dbnetedit1">
			<tr>
				<td>
					<div id="tabs" style="display:none">
						<ul>
							<li><a href="#tabs-1">Name</a></li>
							<li><a href="#tabs-2">Address</a></li>
							<li><a href="#tabs-3">Employment</a></li>
							<li><a href="#tabs-4">Photo</a></li>
							<li><a href="#tabs-5">Notes</a></li>
						</ul>
						<div id="tabs-1" style="height:140px;">
							<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>
						<div id="tabs-2" style="height:140px;">
							<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>
						<div id="tabs-3" style="height:140px;">
							<table>
								<tr>
									<td>Title</td>
									<td><span ColumnExpression="Title" /></td>
								</tr>
								<tr>
									<td>Hire Date</td>
									<td><span ColumnExpression="HireDate" /></td>
								</tr>
							</table>
						</div>
						<div id="tabs-4" style="height:140px;">
							<table>
								<tr>
									<td><span ColumnExpression="Photo" MaxThumbnailHeight="100" /></td>
								</tr>
							</table>
						</div>   
						<div id="tabs-5" style="height:140px;">
							<table>
								<tr>
									<td><span width="500px" height="120px" EditControlType="Html" ColumnExpression="Notes" /></td>
								</tr>
							</table>
						</div>    
						<table style="width:100%">
							<tr>
								<td style="text-align:right;border-top:1pt solid silver" ID="dbnetedit1_toolbarPanel"></td>
							</tr>
							<tr>
								<td ID="dbnetedit1_messagePanel"></td>
							</tr>
						</table>

					</div>

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