Include the client JavaScript & CSS libraries

	<link rel="stylesheet" type="text/css" href="dbnetsuite.css.ashx" />
	<script language="JavaScript" src="dbnetsuite.js.ashx"></script>
    <link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet">

Client-side configuration script

	<script>
	jQuery(document).ready( init )
	var dbnetgrid1
	//////////////////////////////////////////
	function init()
	//////////////////////////////////////////
	{
		dbnetgrid1 = new DbNetGrid("dbnetgrid1");
		with (dbnetgrid1)
		{
			connectionString = "SamplesDatabase"
			fromPart = "Employees"

			setColumnExpressions("FirstName","LastName","Notes");

			bind("onCellTransform",formatCell)
			bind("onPageLoaded",pageLoaded)
			initialize()
		}
	}

	//////////////////////////////////////////
	function pageLoaded(grid)
	//////////////////////////////////////////
	{
		jQuery(document).find(".dialog").dialog({autoOpen:false});
		jQuery(document).find(".simple-popup-link").bind("click",showNotesDialog);
	}

	//////////////////////////////////////////
	function showNotesDialog(event)
	//////////////////////////////////////////
	{
		jQuery(document).find(".dialog").dialog("close");
		var dialog = jQuery(document).find(".dialog[rowId=" + event.target.getAttribute("rowId") + "]");
		dialog.dialog("open");
	}

	//////////////////////////////////////////
	function formatCell(grid, args)
	//////////////////////////////////////////
	{
		var cell = jQuery(args.cell);
		switch(args.columnName)
		{
			case "Notes":
				switch (document.getElementById("text_style").value)
				{
					case "Popup":
						var rowId = cell.parent().attr("datarowindex");
						var a = jQuery("<a/>").attr("href","#").addClass("simple-popup-link").attr("rowId",rowId).text("Show Notes");
						var dialog = jQuery("<div/>").addClass("dialog").attr("rowId",rowId).css("background-color","white").attr("title","Notes");
						var div = jQuery("<div/>").css("background-color","white").html(cell.html()).css("height","200").css("width","300");
						dialog.append(div);	
						cell.empty().append(a).append(dialog);
						break;
					case "Characters":
						cell.attr("title", cell.text());
						cell.text(cell.text().substr(0,40) + "...");
						break;
					case "Words":
						cell.attr("title", cell.text());
						cell.text(cell.text().split(" ").slice(0,5).join(" ") + "...");
						break;
					case "Scroll":
						var div = jQuery("<div/>").addClass("scroll").text(cell.text());
						cell.empty().append(div);
						break;                                          
					case "Overflow":
						cell.attr("title", cell.text());
						var div = jQuery("<div/>").addClass("overflow").text(cell.text());
						cell.empty().append(div);
						break;
				    case "Tooltip":
				        cell.attr("title", cell.text());
				        cell.html('<i class="fa fa-book fa-lg"></i>').css("text-align","center");
				        cell.tooltip()
                }
			 break;   
		}
	}
	
	</script>

HTML markup

	Text presentation style
	<select id="text_style" onchange="dbnetgrid1.initialize()">
		<option value="Popup">Popup
        <option value="Characters">Characters
        <option value="Words">Words
        <option value="Scroll">Scroll
        <option value="Overflow">Overflow
        <option value="Tooltip">Tooltip
	</select>
	<div id="dbnetgrid1"></div>

CSS

<style>
div.scroll
{
	height:50px;
	width:200px;
	overflow-y:scroll;
}
div.overflow
{
	height:16px;
	width:200px;
	overflow-x:hidden;
}

div.dialog
{
	background-color:white;
}
</style>