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 )

	var toolbarOptions = ["Search","Quick Search","View","Update Row","Insert Row","Delete Row","Navigation","Row Info","Save","Output  Page Select","Print","Copy","Config"];
	var saveOptions = ["HTML","Word","Excel","XML","CSV","PDF"];
	var buttonStyles = ["Image","Text","ImageAndText"];
	
	var table = jQuery("#toolbarOptions");

	for (var i=0; i<toolbarOptions.length; i++)
	{
		var row = table[0].insertRow(-1);
		var cell = row.insertCell(-1);
		cell.innerHTML = toolbarOptions[i].replace(" ","&nbsp;");
		if ( toolbarOptions[i] == "Copy")
			cell.innerHTML += "&nbsp;(IE Only)";
			
		cell.style.paddingLeft = "10px";
		cell = row.insertCell(-1);
		var cb = jQuery(document.createElement("INPUT"));
		cb.attr("type","checkbox");
		cb.attr("id",toolbarOptions[i].replace(/ /g,"") + "Cb");
		cb.appendTo(jQuery(cell));
	}

	table.find("input").attr("checked","checked");
	table.find("input").bind("click",init);
	
	for (var i=0; i<buttonStyles.length; i++)
	{
		var option = document.createElement("OPTION")
		option.value = buttonStyles[i]
		option.text = buttonStyles[i]
		jQuery("#buttonStyles")[0].options.add(option);
	}	

	jQuery("#buttonStyles").bind("change",init);
	
	var list = jQuery("#saveOptions");

	for (var i=0; i<saveOptions.length; i++)
	{
		var option = document.createElement("OPTION")
		option.value = saveOptions[i]
		option.text = saveOptions[i]
		option.selected = true;
		list[0].options.add(option);
	}

	list.bind("change",init);

	function init()
	{
		var dbnetgrid1 = new DbNetGrid("dbnetgrid1");
		dbnetgrid1.connectionString = "SamplesDatabase"
		dbnetgrid1.setColumnExpressions("ProductID","ProductName","UnitPrice","Discontinued")

		for (var i=0; i<toolbarOptions.length; i++)
		{
			var option = toolbarOptions[i].replace(/ /g,"");
			var id = option.substr(0,1).toLowerCase() + option.substr(1);
			dbnetgrid1[id] = document.getElementById(option + "Cb").checked
		}

		var saveOptions = [];
		var list = jQuery("#saveOptions");
		for (var i=0; i < list[0].options.length; i++)
			if (list[0].options[i].selected)
				saveOptions.push(list[0].options[i].value)

		dbnetgrid1.saveOptions = saveOptions.join(",")
		dbnetgrid1.toolbarButtonStyle = jQuery("#buttonStyles").val();

		dbnetgrid1.fromPart = "Products"
		dbnetgrid1.initialize()
	}

	</script>

HTML markup

	<table>
		<tr>
			<td style="vertical-align:top">
				<fieldset style="background-color:whitesmoke">
					<legend>Toolbar Options</legend>
					<table id="toolbarOptions"></table>
				</fieldset>
				<fieldset style="background-color:whitesmoke">
					<legend>Button Style</legend>
					<select id="buttonStyles"></select>
				</fieldset>				
				<fieldset style="background-color:whitesmoke">
					<legend>Export Options</legend>
					<select id="saveOptions" size=4 multiple></select>
				</fieldset>
			</td>
			<td style="vertical-align:top">
				<div id="dbnetgrid1"></div>
			</td>
		</tr>
	</table>