Include the Javascript library file

Styles

Client-side script

window.onload = initialise;

var countryCombo, cityCombo, customerCombo, dbnetgrid1;

//////////////////////////////////////////////////////////////////////////////////////////////
function initialise()
//////////////////////////////////////////////////////////////////////////////////////////////
{
	countryCombo = new DbNetCombo("country")
	cityCombo = new DbNetCombo("city")
	customerCombo = new DbNetCombo("customers")

with (countryCombo)
	{
		connectionString = "suite"
		sql = "select distinct country, country from customers where country is not null order by 2"
		addLinkedCombo( cityCombo, "country" )
	}

with (cityCombo)
	{
		connectionString = "suite"
		sql = "select distinct city, city from customers where country = @country and city is not null order by 2"
		addLinkedCombo( customerCombo, "city" )
	}

with (customerCombo)
	{
		connectionString = "suite"
		sql = "select customerid, companyname from customers where city = @city order by 2"
		onChange = "refreshOrderGrid"
	}

dbnetgrid1 = new DbNetGrid("dbnetgrid1")
	with (dbnetgrid1)
	{
		connectionString = "suite"
		fromPart = "orders"

selectPart = ["orderid", "employeeid", "orderdate", "requireddate", "shippeddate", "freight"]
		headings = ["Order #", "Taken By", "Date Ordered", "Date Required", "Date Shipped", "Freight Charge"]
				
		primaryKeyColumn = "orderid"	
		editRow = false
		setColumnProperty("freight", "format:c")
		setColumnLookup("employeeid","employeeid","firstname + ' ' + lastname","employees");
		addNestedGrid( configureOrderDetailsGrid, "orderid" ) 
	}

countryCombo.load()

}

//////////////////////////////////////////////////////////////////////////////////////////////
function refreshOrderGrid()
//////////////////////////////////////////////////////////////////////////////////////////////
{	
	with (dbnetgrid1)
	{
		fixedFilterPart = "customerid = '" + document.getElementById('customers').value + "'"
		loadData()
	}
}

//////////////////////////////////////////////////////////////////////////////////////////////
function configureOrderDetailsGrid( parentGrid )
//////////////////////////////////////////////////////////////////////////////////////////////
{
	with (parentGrid.childGrid)
	{
		displayToolbar = false
		fromPart = "[order details] inner join products on [order details].productid = products.productid"
		headings = ["Product","Category","Unit Price","Quantity", "Discount"]
		selectPart = ["productname", "categoryid", "[order details].unitprice", "quantity", "discount"]
		
		setColumnProperty("unitprice", "format:c")
		setColumnProperty("discount", "format:c")

setColumnLookup("categoryid","categoryid","categoryname","categories")
		loadData()
	}
}

Include the Javascript library file

Styles

Client-side script

HTML