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()
	{
		var dbnetlist1 = new DbNetList("dbnetlist1");

		with (dbnetlist1)
		{
			connectionString = "SamplesDatabase"
			sql = "select distinct country from customers where country is not null order by country"
			height = "400px"
			width = "200px"
			setColumnProperty("country","selectable",true)
			bind("onLinkSelected", selectOrders)
			addNestedList( configureCityList )
			initialize()
		}

		var dbnetgrid1 = new DbNetGrid("dbnetgrid1");

		with (dbnetgrid1)
		{
			connectionString = "SamplesDatabase"
			fromPart = "orders"
			setColumnExpressions("OrderID","CustomerID","OrderDate","RequiredDate","ShippedDate");   
			setColumnLabels("ID","Customer","Ordered","Required","Shipped");   
			setColumnProperty("CustomerID","lookup","select customerid, companyname from customers");

			fixedFilterSql = "1=2"
			initialize()
		}
	}


	function configureCityList(list)
	{
		with (list)
		{
			sql = "select distinct city from customers where country = ? order by city"
			parameters = {"country" : "" }
			bind("onLinkSelected", selectOrders)
			setColumnProperty("city","selectable",true)
			addNestedList( configureCustomersList )
		}
	}

	function configureCustomersList(list)
	{
		with (list)
		{
			sql = "select companyname, customerid from customers where city = ? order by companyname"
			parameters = {"city" : "" }
			bind("onLinkSelected", selectOrders)
			setColumnProperty("companyname","selectable",true)
			setColumnProperty("customerid","display",false)
		}
	}


	function selectOrders(control, args)
	{
		var fixedFilterSql = "";
		var fixedFilterParams = {};

		switch(control.nestedLevel)
		{
			case 0:
				fixedFilterSql = "country = ?";
				fixedFilterParams = {country : jQuery(args.event.target).text()};
				break;
			case 1:
				fixedFilterSql = "city = ?";
				fixedFilterParams = {city : jQuery(args.event.target).text()};
				break;
			case 2:
				fixedFilterSql = "customerid = ?";
				fixedFilterParams = {customerid : jQuery(args.event.target).parents("tr:first").attr("customerid")};
				break;
		}

		fixedFilterSql = "customerid in (select customerid from customers where " + fixedFilterSql + ")";
		DbNetLink.components["dbnetgrid1"].fixedFilterSql = fixedFilterSql;
		DbNetLink.components["dbnetgrid1"].fixedFilterParams = fixedFilterParams;
		DbNetLink.components["dbnetgrid1"].loadData();
	}

	</script>

HTML markup

<table>
	<tr>
		<td style="vertical-align:top">
			<fieldset>
				<legend>Region</legend>
				<div id="dbnetlist1"></div>		
			</fieldset>
		</td>
		<td style="vertical-align:top">
			<fieldset>
				<legend>Orders</legend>
				<div id="dbnetgrid1"></div>		
			</fieldset>
		</td>
	</tr>
</table>