Include the Javascript library file

Client-side script

window.onload = initGrid

//////////////////////////////////////////////////
function initGrid()
//////////////////////////////////////////////////
{
	var dbnetgrid1 = new DbNetGrid( "dbnetgrid1" )
	var dbnetgrid2 = new DbNetGrid( "dbnetgrid2" )
	var dbnetgrid3 = new DbNetGrid( "dbnetgrid3" )

with ( dbnetgrid1 )
	{
		connectionString = "samples"
		headings = ["Customer Code","Customer Name","Address","City", "Phone"]
		selectPart = ["customerid","companyname","address","city", "phone"]
		fromPart = "customers"
		primaryKeyColumn = "customerid"
		pageSize = 10

//		allowLinkedDeletion = true

setColumnProperty('phone','noWrap:true')
		setColumnProperty('fax','transform:noWrap')

setColumnProperty('city','backgroundColor:orange')
		setColumnProperty('fax no','backgroundColor:orange')
		setColumnProperty('region','backgroundColor:yellow',/WY/,true)
		setColumnProperty('region','backgroundColor:darkorange',/WA/,false)
		setColumnProperty('region','backgroundColor:gold',/SP/,false)
		setEditColumnProperty('customerid','required:true')
		setEditColumnProperty('customerid','textTransform:uppercase')
		setEditColumnProperty('companyname','required:true')

addDetailGrid(dbnetgrid2,'customerid')
	}

with ( dbnetgrid2 )
	{
		headings = ["Order ID","Order Date","Shipped Date","Required Date","Freight"]
		selectPart = ["orderid","orderdate","shippeddate","requireddate","freight"]
		fromPart = "orders"
		fixedOrderPart = "orderdate"
		primaryKeyColumn = "orderid"
		pageSize = 5
		setColumnProperty('freight','transform:highlightFreight')
		setColumnProperty('freight','decimalPlaces:2')

editLabels = ["Order Date","Shipped Date","Required Date","Freight","Customer ID"]
		editFields = ["orderdate","shippeddate","requireddate","freight","customerid"]

setEditColumnProperty('freight','required:true')
		help = false
		rowInfo = false
		pageInfo = false
		config = false
		sort = false
		columnPicker = false
		copy = false

addDetailGrid(dbnetgrid3,'orderid')
	}

with ( dbnetgrid3 )
	{
		headings = ["Product","Unit Price","Qty","Disc.(%)"]
		selectPart = ["productname","[order details].unitprice","quantity","(discount * 100) as discount"]
		fromPart = "[order details] inner join products on [order details].productid = products.productid"
		setColumnProperty( "unitprice","decimalPlaces:2")
		setColumnProperty( "discount","decimalPlaces:2")

pageSize = 5
		office = false
		help = false
		rowInfo = false
		pageInfo = false
		config = false
		sort = false
		columnPicker = false
		copy = false
		search = false
		print = false
	}

dbnetgrid1.loadData()
}

//////////////////////////////////////////////////
function highlightFreight(cell)
//////////////////////////////////////////////////
{
	if( parseInt(cell.innerText) > 50 )
	{
		cell.style.backgroundColor = "yellow"
		cell.style.fontWeight = "bold"
		cell.style.border = "1pt solid black"
	}
}

Customers
Orders	Order Lines

Include the Javascript library file

Client-side script

HTML