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 )

	function init()
	{
		jQuery(".lookup-dialog").dialog({autoOpen:false,open:sizeDialog});
		jQuery(".lookup-dialog").find(".close-button").bind("click", closeDialog);
		jQuery(".lookup-dialog").find(".select-button").bind("click", selectFile);

		var documentsGrid = new DbNetGrid("documentsGrid");
		with (documentsGrid)
		{
			connectionString = "SamplesDatabase"
			fromPart = "documents"
			setColumnExpressions("DocumentID","DocumentDescription","FilePath")
			setColumnLabels("Document ID","Description","Image")
			fixedFilterSql = "FilePath like '%.png' or FilePath like '%.jpg' or FilePath like '%.gif'";
			bind("onEditDialogInitialized", addCustomLookupButton)

			initialize()
		}

		var fileControl = new DbNetFile("fileControl");
		with (fileControl)
		{
			rootFolder = "~/samples/dbnetfile/files/images"
			rootFolderAlias = "Images"
			bind("onRowSelected", enableSelection)
			initialize()
		}

	/////////////////////////////////////////
    function sizeDialog(event, ui)
	/////////////////////////////////////////
    {
        jQuery(event.target).dialog("option", "width", jQuery(event.target).children().width());
        jQuery(event.target).dialog("option", "position", "center");
    }

	/////////////////////////////////////////
	function addCustomLookupButton(control, args) {
	/////////////////////////////////////////
		var button = args.editControl.addInputControlButton('FilePath');
		button.onclick = openDialog;
		var img = document.createElement("img");
		img.title = "Select image";
		img.src = "../images/book.gif"
		jQuery(button).height(22)
		button.appendChild(img);
	}

	/////////////////////////////////////////
	function openDialog() {
	/////////////////////////////////////////
		jQuery(".lookup-dialog").dialog("open");
	}

	/////////////////////////////////////////
	function selectFile() {
	/////////////////////////////////////////
		var fileControl = DbNetLink.components["fileControl"];
		var documentsGrid = DbNetLink.components["documentsGrid"];

		documentsGrid.editDialog.editControl.setInputControlValue("FilePath",fileControl.selectedFilePath )

		jQuery(".lookup-dialog").dialog("close");
	}

	/////////////////////////////////////////
    function enableSelection(sender, args)
	/////////////////////////////////////////
    {
        jQuery(".lookup-dialog").find(".select-button")[0].disabled = (args.fileInfo.type == "DirectoryInfo");
    }


	/////////////////////////////////////////
	function closeDialog() {
	/////////////////////////////////////////
		jQuery(".lookup-dialog").dialog("close");
	}

	}
	</script>

HTML markup

	<div id="documentsGrid"></div>
	<div class="lookup-dialog" title="File Lookup" style="display:none">
		<div id="fileControl" style="width:400px"></div>
		<div>
			<div style="float:right"> 
				<button type="button" class="select-button">Select</button>
				<button type="button" class="cancel-button">Cancel</button>
			</div>
		</div>
	</div>