Register the component libraries

Server Control

<table>
		<tr>
			<td valign=top>
				<fieldset>
					<legend>Customers by Region</legend>
						<List:DbNetList 
							id="customers" 
							runat="server" 
							ConnectionString="samples"
							ShowRoot="false"
							STYLE="width:200px;height:300px;"
							OnRowSelected = "selectedRow"
							NoLoad="true"
							>
							<Tiers>
								<List:Tier Sql="select distinct country, country as id  from customers order by country"></List:Tier>
								<List:Tier Sql="select distinct city, city as id from customers where country = @id order by city"></List:Tier>
								<List:Tier Sql="select distinct companyname, customerid from customers where city = @id order by companyname"></List:Tier>
							</Tiers>
						</List:DbNetList>
				</fieldset>
			</td>
			<td style='width:30px'>&nbsp;</td>
			<td valign=top>
				<fieldset>
					<legend id=ordersLegend>Orders</legend>
					<Grid:DbNetGrid 
						id="orders" 
						runat="server" 
						FixedOrderPart = "country, city, companyname"
						FromPart="orders inner join customers on orders.customerid = customers.customerid"
						ConnectionString="suite"
						PrimaryKeyColumn = "orderid"
						ForeignKeyColumn = "customerid"
						SelectPart = "country, city, companyname, orderid, employeeid, orderdate, requireddate, shippeddate, freight"
						Headings = "Country, City, Company, Order #, Taken By, Date Ordered, Date Required, Date Shipped, Freight Charge"
						PageSize="16"
						NoLoad="true"
						>
						<GridColumnLookups>
							<Grid:GridColumnLookup ColumnName="employeeid" ForeignKeyColumn="employeeid" ForeignDescriptionColumn="lastname + ', ' + firstname" ForeignTable="employees"></Grid:GridColumnLookup>	
						</GridColumnLookups>
						<GridColumnProperties>
							<Grid:ColumnProperty ColumnName="freight" Property="format" Value="n"></Grid:ColumnProperty>
						</GridColumnProperties>
					</Grid:DbNetGrid>				
				</fieldset>
			</td>
		</tr>
	</table>	
</form>

Client-side script

window.onload = initialise

//////////////////////////////////////////////////////////////////////////////////////////////
function initialise()
//////////////////////////////////////////////////////////////////////////////////////////////
{	
	window.DbNetListArray["customers"].loadData()
}

///////////////////////////////////////////////////////////////////////////
function selectedRow(list)
///////////////////////////////////////////////////////////////////////////
{
	var fp

var level = list.selectedRow.getAttribute("dbnlLevel")
	switch (level)
	{
		case '0':
			document.getElementById('ordersLegend').innerText = 'Orders For ' + list.rowValue('country')
			fp = "customers.country = '" + list.rowValue("country") + "'"
			break
		case '1':
			document.getElementById('ordersLegend').innerText = 'Orders For ' + list.rowValue('city')
			fp = "customers.city = '" + list.rowValue("city") + "'"
			break
		case '2':
			document.getElementById('ordersLegend').innerText = 'Orders For ' + list.rowValue('companyname')
			fp = "customers.customerid = '" + list.rowValue("customerid") + "'"
			break;
		default:
			fp = " 1=2"
			break;
	}

with (window.DbNetGridArray["orders"])
	{
		pageNumber = 1
		fixedFilterPart = fp
		loadData()
	}
}

Register the component libraries

Server Control

Client-side script

Styles