<%@ Page Language="C#" EnableViewState="false" %>

<%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
	<title>RadGrid and ASP.NET Ajax 4.0 client-side templates</title>

	<script type="text/javascript">
		var commandName = "";
		var tableView = null;

		function pageLoad(sender, args) {
			tableView = $find("RadGrid1").get_masterTableView();

			commandName = "Load"

			WebService.GetData(0, tableView.get_pageSize(),
                tableView.get_sortExpressions().toString(), tableView.get_filterExpressions().toDynamicLinq(),
                    updateGrid);
		}

		function RadGrid1_Command(sender, args) {
			args.set_cancel(true);

			commandName = args.get_commandName();

			WebService.GetData(tableView.get_currentPageIndex() * tableView.get_pageSize(), tableView.get_pageSize(),
                tableView.get_sortExpressions().toString(), tableView.get_filterExpressions().toDynamicLinq(),
                    updateGrid);
		}

		function updateGrid(result) {
			tableView.set_dataSource(result);
			tableView.dataBind();

			if (commandName == "Filter" || commandName == "Load") {
				WebService.GetCount(updateVirtualItemCount);
			}
		}

		function updateVirtualItemCount(result) {
			tableView.set_virtualItemCount(result);
		}

		function RadGrid1_RowDataBound(sender, args) {
			var item = args.get_item();
			var template = new Sys.Preview.UI.Template.getTemplate($get("myTemplate"));
			item.get_cell("ProductID").innerHTML = "";
			template.createInstance(item.get_cell("ProductID"), args.get_dataItem());
		}
	</script>

	<style type="text/css">
		.data, .block
		{
			float: left;
			width: 49%;
			padding: 2px;
		}
		.label
		{
			float: left;
			width: 49%;
			padding: 2px;
			clear: left;
			font-weight: bold;
		}
	</style>
</head>
<body>
	<form id="form1" runat="server">
	<div>
		<asp:ScriptManager ID="RadScriptManager1" runat="server">
			<Services>
				<asp:ServiceReference Path="~/WebService.asmx" />
			</Services>
			<Scripts>
				<asp:ScriptReference Path="~/MicrosoftAjaxTemplates.js" />
			</Scripts>
		</asp:ScriptManager>
		<telerik:RadGrid ID="RadGrid1" Width="850px" PageSize="3" AllowFilteringByColumn="true"
			AllowPaging="true" AllowSorting="true" AutoGenerateColumns="False" Skin="Hay"
			runat="server" GridLines="None">
			<MasterTableView>
				<Columns>
					<telerik:GridTemplateColumn DataField="ProductID" SortExpression="ProductID" HeaderText="ProductID"
						HeaderStyle-Width="90px" UniqueName="ProductID" />
					<telerik:GridBoundColumn DataField="ProductName" SortExpression="ProductName" HeaderText="ProductName"
						UniqueName="ProductName" />
					<telerik:GridNumericColumn DataField="UnitPrice" SortExpression="UnitPrice" HeaderText="UnitPrice"
						UniqueName="UnitPrice" DataType="System.Decimal" />
					<telerik:GridNumericColumn DataField="UnitsInStock" SortExpression="UnitsInStock"
						HeaderText="UnitsInStock" UniqueName="UnitsInStock" DataType="System.Int32" />
					<telerik:GridCheckBoxColumn DataField="Discontinued" HeaderText="Discontinued" SortExpression="Discontinued"
						HeaderStyle-Width="90px" UniqueName="Discontinued" DataType="System.Boolean" />
				</Columns>
				<ItemTemplate>
				</ItemTemplate>
			</MasterTableView>
			<ClientSettings EnableRowHoverStyle="true">
				<ClientEvents OnCommand="RadGrid1_Command" OnRowDataBound="RadGrid1_RowDataBound" />
			</ClientSettings>
		</telerik:RadGrid>
		<div id="myTemplate" style="display: none;">
				<div class="block">
					<div class="label">
						<b>ProductID:</b></div>
					<div class="data">
						{{ProductID}}
					</div>
					<div class="label">
						<b>ProductName:</b></div>
					<div class="data">
						{{ProductName}}
					</div>
					<div class="label">
						<b>SupplierID:</b></div>
					<div class="data">
						{{SupplierID}}
					</div>
					<div class="label">
						<b>CategoryID:</b></div>
					<div class="data">
						{{CategoryID}}
					</div>
					<div class="label">
						<b>QuantityPerUnit:</b></div>
					<div class="data">
						{{QuantityPerUnit}}
					</div>
				</div>
				<div class="block">
					<div class="label">
						<b>UnitsOnOrder:</b></div>
					<div class="data">
						{{UnitsOnOrder}}
					</div>
					<div class="label">
						<b>UnitPrice:</b></div>
					<div class="data">
						{{UnitPrice}}
					</div>
					<div class="label" style="clear: left;">
						<b>UnitsInStock:</b></div>
					<div class="data">
						{{UnitsInStock}}
					</div>
					<div class="label" style="clear: left;">
						<b>ReorderLevel:</b></div>
					<div class="data">
						{{ReorderLevel}}
					</div>
					<div class="label">
						<b>Discontinued:</b></div>
					<div class="data">
						{{Discontinued}}
					</div>
				</div>
			</div>
	</div>
	</form>
</body>
</html>
