Include the DbNetGrid JavaScript library

Use the window "onload" event to initialise the component

window.onload = initGrid

//////////////////////////////////////////////////////////////////////////////////////////////
function initGrid()
//////////////////////////////////////////////////////////////////////////////////////////////
{
	var months = ["January","February","March","April","May","June","July","August","September","October","November","December"]
	var dbnetgrid1 = new DbNetGrid( "dbnetgrid1" )

with ( dbnetgrid1 )
	{
		connectionString = "samples"
		selectPart = ["year(orderdate) year"]
		headings = [" "]

for (var i = 0; i < months.length; i++ )
		{
			selectPart = selectPart.concat("SUM(CASE WHEN MONTH(OrderDate) = " + (i+1) + " THEN LineTotal END) AS '" + months[i] + "'");
			headings = headings.concat( months[i] );
			setColumnProperty( months[i], "format:n" )
		}

setColumnProperty( "year", "background-color:gainsboro" )
		setColumnProperty( "year", "font-weight:bold" )

chart = true;

}

Include the Javascript library file

Styles

Client-side script

window.onload = initGrid

var months = ["January","February","March","April","May","June","July","August","September","October","November","December"]
	var dbnetgrid1 = new DbNetGrid( "dbnetgrid1" )

with ( dbnetgrid1 )
	{
		connectionString = "sqlserver"
		selectPart = ["year(orderdate) year"]
		headings = ["&nbsp;"]

setColumnProperty( "year", "background-color:gainsboro" )
		setColumnProperty( "year", "font-weight:bold" )

chart = true;

fromPart = "sales.salesorderheader join sales.salesorderdetail on sales.salesorderheader.salesorderid = sales.salesorderdetail.salesorderid"
		groupBy = "year(orderdate)"
		orderColumn = "year(orderdate)"
		editRow = false
		loadData()
	}
}
</script>
</head>
<body>
<div class=text>With <B>DbNetGrid</B> you can create pivot tables to show summary information with ease</div>
<%
WriteHeader();
%>

<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

with ( dbnetgrid1 )
	{
		connectionString = "samples"
		selectPart = ["year(orderdate) year"]
		headings = ["&nbsp;"]

setColumnProperty( "year", "background-color:gainsboro" )
		setColumnProperty( "year", "font-weight:bold" )

chart = true;

}
</textarea>