Include the Javascript library file

Client-side script

window.onload = initialise

var dbnetedit1, dbnetgrid1

//////////////////////////////////////////////////////////////////////////////////////////////
function initialise()
//////////////////////////////////////////////////////////////////////////////////////////////
{
	dbnetgrid1 = new DbNetGrid( "dbnetgrid1" )
	with ( dbnetgrid1 )
	{
		connectionString = "suite"
		fromPart = "customers"
		view = true
		primaryKeyColumn = "customerid"
		pageSize = 10
		selectPart = ["CompanyName", "ContactName", "ContactTitle", "Address", "city", "region", "postalcode", "phone","fax"]
		headings = ["Company", "Contact","Job Title", "Address", "City", "Region", "Post Code", "Phone", "Fax"]
		config=false
		help = false
		print = false
		view = false
		columnPicker = false
		save = false
		sort = false
		copy = false

onDoubleClick = "revealPanel"
		toolbarElement("updateRow").onclick = revealPanel

loadData()
	}

dbnetedit1 = new DbNetEdit( "dbnetedit1" );
	with (dbnetedit1) 
	{
		connectionString = "suite"		
		setFieldProperty("country", "lookup:select distinct country, country from customers")
		rowInitialisation = "showPanel"
		registerDbNetGrid(dbnetgrid1)
	}
}

//////////////////////////////////////////////////////////////////////////////////////////////
function showPanel(form)
//////////////////////////////////////////////////////////////////////////////////////////////
{
	if (form.mode == 'insert')
		revealPanel()
}

//////////////////////////////////////////////////////////////////////////////////////////////
function revealPanel()
//////////////////////////////////////////////////////////////////////////////////////////////
{
	if ($('dbnetedit1').style.visibility == 'hidden')
	{
		with (document.getElementById("dbnetedit1"))
		{
			style.visibility="visible"
			if (style.left == '')
			{
				style.left = ((screen.availWidth - offsetWidth) / 2) + "px"
				style.top = ((screen.availHeight - offsetHeight) / 2) + "px"
			}
		}
		var pageSelector = dbnetgrid1.toolbarElement( "pageNumber" )
		pageSelector.style.visibility = "hidden"
	}
}

//////////////////////////////////////////////////////////////////////////////////////////////
function hidePanel()
//////////////////////////////////////////////////////////////////////////////////////////////
{
	if ($('dbnetedit1').style.visibility == 'visible')
	{
		document.getElementById("dbnetedit1").style.visibility="hidden"
		var pageSelector = dbnetgrid1.toolbarElement( "pageNumber" )
		pageSelector.style.visibility = "visible"
	}
}

HTML

<table cellpadding=0 cellspacing=0 style='border:1pt solid silver;width:100%;background-color:steelblue' onmousedown="dragStart(event, 'dbnetedit1')">
			<tr>
				<td style='width:100%'>&nbsp;</td>
				<td align='right'>
					<img src='/dbnetedit/images/close.gif' onclick='hidePanel()' ></img>
				</td>
			</tr>
		</table>
		<table>
			<tr>
				<td valign=top>
					<table>
						<tr>
							<td>Account Code</td>
							<td><input id=customerid class=dbnetedit></td>
						</tr>
						<tr>
							<td>Company</td>
							<td><input id=companyname class=dbnetedit></td>
						</tr>
						<tr>
							<td>Contact</td>
							<td><input id=contactname class=dbnetedit></td>
						</tr>
						<tr>
							<td>Phone</td>
							<td><input id=phone class=dbnetedit></td>
						</tr>
						<tr>
							<td>Fax</td>
							<td><input id=fax class=dbnetedit></td>
						</tr>
					</table>
				</td>
				<td valign=top>
					<table>
						<tr>
							<td>Address</td>
							<td><textarea id=address class=dbnetedit></textarea></td>
						</tr>
						<tr>
							<td>City</td>
							<td><input id=city class=dbnetedit></td>
						</tr>
						<tr>
							<td>Region</td>
							<td><input id=region class=dbnetedit></td>
						</tr>
						<tr>
							<td>Zip</td>
							<td><input id=postalcode class=dbnetedit></td>
						</tr>
						<tr>
							<td>Country</td>
							<td><select id=country class=dbnetedit></select></td>
						</tr>
					</table>
				</td>
			</tr>
			<tr>
				<td colspan=2 style="text-align:right;border-top:1.5pt groove">
					<table>
						<tr>
							<td id=toolbar>&nbsp;</td>
							
						</tr>
					</table>
				</td>
			</tr>
			<tr>
				<td colspan=2 id=messageLine>&nbsp;</td>
			</tr>
		</table>
	</div>