Include the DbNetGrid JavaScript library

Use the window "onload" event to initialise the component

window.onload = initGrid

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

with(dbnetgrid1)
	{	
		connectionString = "samples"
		editRow = true
		headings = ["Date","Time","Name","Country","Favourite Web Site","Favourite Colour","Favourite Quote","Favourite GIF"]
		selectPart = ["visit_date","visit_time","name","country","website","colour","comment","document"]
		editLabels = ["Date","Time","Name","Country","Favourite Web Site","Favourite Colour","Favourite Quote","Favourite GIF","IP"]
		editFields = ["visit_date","visit_time","name","country","website","colour","comment","document","ip"]
		fromPart = "visitor"
		primaryKeyColumn = "id"
		orderColumn = "id"
		orderSequence = "desc"
		columnPicker = false
		help = false

deleteRow = false

setColumnProperty('colour','transform:setCellColour')
		setColumnProperty('visit_time','format:t')
		setEditColumnProperty('visit_time','format:t')
		setSearchColumnProperty('visit_time','format:t')

setColumnProperty('website','modify:<a target=_blank href={$}>{$}</a>',/^http/)
		setColumnProperty('website','modify:<a target=_blank href=http://{$}>{$}</a>',/^www/)
			
		setEditColumnProperty('country',"lookup:select country col1, country col2 from country order by col1")
		setEditColumnProperty('colour',"lookup:select colour col1, ' ' col2 from colour order by col1")
		rowValidation = "validateRow"

editRowInitialisation = "initialiseEditRow"
		setSearchColumnProperty('country','searchLookup:select country col1, country col2 from country order by col1')
		setSearchColumnProperty('colour','searchLookup:select colour col1, colour col2 from colour order by col1')

setEditColumnProperty('visit_date','required:true')
		setEditColumnProperty('visit_time','required:true')

var d = new Date()
		var currentDate = (d.getMonth()+1) + '/' + d.getDate() + '/' + d.getFullYear()
		var currentTime = d.getHours() + ':' + d.getMinutes()
		
		setEditColumnProperty('visit_date','initialValue:' + currentDate)
		setEditColumnProperty('visit_time','initialValue:' + currentTime )

ip = "38.107.179.226"

setEditColumnProperty('ip','initialValue:' + ip)
		setEditColumnProperty('ip','display:none')

setEditColumnProperty('document','uploadRootFolder:' + imageFolder)
		setEditColumnProperty('document','uploadExtFilter:gif')
		setEditColumnProperty('document','uploadMaxFileSize:2k')
		setColumnProperty('document','transform:convertToImage')
		editDialogHeight = ""

editFields = ["visit_date","visit_time","name","country","website","colour","comment","document","ip"]

loadData()
	}
}

Include the Javascript library file

Client-side script

window.onload = initGrid
var ip
var imageFolder = "/data/files/"

var dbnetgrid1

////////////////////////////////////////////
function initGrid()
////////////////////////////////////////////
{
	dbnetgrid1 = new DbNetGrid("dbnetgrid1")

with(dbnetgrid1)
	{	
		connectionString = "sqlserver"
		editRow = true
		headings = ["Date","Time","Name","Country","Favourite Web Site","Favourite Colour","Favourite Quote","Favourite GIF"]
		selectPart = ["visit_date","visit_time","name","country","website","colour","comment","document"]
		editLabels = ["Date","Time","Name","Country","Favourite Web Site","Favourite Colour","Favourite Quote","Favourite GIF","IP"]
		editFields = ["visit_date","visit_time","name","country","website","colour","comment","document","ip"]
		fromPart = "visitor"
		primaryKeyColumn = "id"
		orderColumn = "id"
		orderSequence = "desc"
		columnPicker = false
		help = false

deleteRow = false

setColumnProperty('colour','transform:setCellColour')
		setColumnProperty('visit_time','format:t')
		setEditColumnProperty('visit_time','format:t')
		setSearchColumnProperty('visit_time','format:t')

setEditColumnProperty('visit_date','required:true')
		setEditColumnProperty('visit_time','required:true')

ip = "<%=Request.ServerVariables["REMOTE_ADDR"]%>"

setEditColumnProperty('ip','initialValue:' + ip)
		setEditColumnProperty('ip','display:none')

editFields = ["visit_date","visit_time","name","country","website","colour","comment","document","ip"]

loadData()
	}
}

////////////////////////////////////////////
function setCellColour(cell) 
////////////////////////////////////////////
{	
	cell.style.backgroundColor = cell.innerText
	cell.innerText = ''
}

////////////////////////////////////////////
function convertToImage(cell) 
////////////////////////////////////////////
{	
	if (cell.innerText == '')
		return

cell.innerHTML = '<img src="' + imageFolder + cell.innerText + '">'
}

////////////////////////////////////////////
function initialiseEditRow(editControl) 
////////////////////////////////////////////
{	
	var colourSelect = editControl.inputControl('colour')
	for (var i=0;i<colourSelect.options.length;i++)
		colourSelect.options[i].style.backgroundColor = colourSelect.options[i].value
	colourSelect.style.width = "100px"

var editIP = editControl.inputControl('ip').value

var editFields = ["visit_date","visit_time","name","country","website","colour","comment"]
	for (i in editFields)
		editControl.inputControl( editFields[i] ).disabled = eval(ip != editIP)

var uploadFieldCell = editControl.inputControl( "document" ).parentElement
	if (!uploadFieldCell.all.uploadMsg)
		uploadFieldCell.insertAdjacentHTML("beforeEnd","<div id=uploadMsg style='padding:2px;'>Uploaded file must be a GIF less than 2K in size</div>")

}

////////////////////////////////////////////
function validateRow(editControl) 
////////////////////////////////////////////
{	
	var visitDate = editControl.inputControl('visit_date').value

var currentDate = new Date()
	var enteredDate = dbnetgrid1.culture.stringToJavascriptDateObject(visitDate)
	
	if (enteredDate > currentDate)
	{
		editControl.msg = 'Date cannot be after today'
		editControl.activeControl = editControl.inputControl('visit_date')
		return false
	}
	else
		return true
}

</script>
</head>
<body>
	<div class=text>Use the <b>Edit Dialog</b> to make changes to the data below. Click the <button style="padding:0px;"><img src="/dbnetlink_components/dbnetgrid/images/insert.gif"></button> button to add your data. Includes drop-down selection, built-in HTML editor, comments and tooltips</div>

<%
WriteHeader();
%>
<div id=sample>
	<div id=dbnetgrid1></div>
</div>

<div id=source style="display:none">
	<h5 class=source>Include the DbNetGrid JavaScript library</h5>
	<textarea  name="code" class="javascript" rows=1 style="width:100%">
	<script language="JavaScript" src="/dbnetgrid/dbnetgrid.js">

HTML

<h5 class=source>Use the window "onload" event to initialise the component</h5>
	<textarea  name="code" class="javascript" rows=15 style="width:100%">
window.onload = initGrid

deleteRow = false

setColumnProperty('colour','transform:setCellColour')
		setColumnProperty('visit_time','format:t')
		setEditColumnProperty('visit_time','format:t')
		setSearchColumnProperty('visit_time','format:t')

setEditColumnProperty('visit_date','required:true')
		setEditColumnProperty('visit_time','required:true')

ip = "<%=Request.ServerVariables["REMOTE_ADDR"]%>"

setEditColumnProperty('ip','initialValue:' + ip)
		setEditColumnProperty('ip','display:none')

editFields = ["visit_date","visit_time","name","country","website","colour","comment","document","ip"]

loadData()
	}
}
</textarea>