<%@ Page Language="C#" AutoEventWireup="true" CodeFile="TreeViewAjaxTemplates.aspx.cs"
	Inherits="_Default" %>

<%@ 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>RadTreeView and ASP.NET Ajax 4.0 client-side templates</title>
	<style type="text/css">
		.sys-template
		{
			display: none;
			visibility: hidden;
		}
		.productTable, .productTableAlt
		{
			width: 300px;
			border-collapse: collapse;
		}
		.productTable td, .productTableAlt td
		{
			text-indent: 4px;
			border: 1px solid #D9D9D9;
			background: #fff;
			height: 21px;
		}
		.productTableAlt td
		{
			background: #EDF3FE;
		}
		.productName
		{
			width: 175px;
		}
		div.RadTreeView .rtIn, div.RadTreeView .rtHover .rtIn, div.RadTreeView .rtSelected .rtIn
		{
			padding: 0;
			margin: 0;
			border: 0;
			color: #333;
		}
		div.RadTreeView .rtSelected .rtIn td
		{
			background: #3D80DF;
			color: #fff;
		}
	</style>
</head>
<body>
	<form id="form1" runat="server">
	<div>
		<asp:ScriptManager runat="server" ID="ScriptManager1">
			<Scripts>
				<asp:ScriptReference Path="~/MicrosoftAjaxTemplates.js" />
			</Scripts>
		</asp:ScriptManager>
		<telerik:RadTreeView runat="server" ID="RadTreeView1" OnClientNodeDataBound="onNodeDataBound" LoadingStatusPosition="None">
			<WebServiceSettings Path="WebService.asmx" Method="GetProducts"></WebServiceSettings>
			<Nodes>
				<telerik:RadTreeNode Text="Beverages" ExpandMode="WebService">
				</telerik:RadTreeNode>
				<telerik:RadTreeNode Text="Condiments" ExpandMode="WebService">
				</telerik:RadTreeNode>
				<telerik:RadTreeNode Text="Confections" ExpandMode="WebService">
				</telerik:RadTreeNode>
				<telerik:RadTreeNode Text="Dairy Products" ExpandMode="WebService">
				</telerik:RadTreeNode>
				<telerik:RadTreeNode Text="Grains/Cereals" ExpandMode="WebService">
				</telerik:RadTreeNode>
				<telerik:RadTreeNode Text="Meat/Poultry" ExpandMode="WebService">
				</telerik:RadTreeNode>
				<telerik:RadTreeNode Text="Produce" ExpandMode="WebService">
				</telerik:RadTreeNode>
				<telerik:RadTreeNode Text="Seafood" ExpandMode="WebService">
				</telerik:RadTreeNode>
			</Nodes>
		</telerik:RadTreeView>
		<div id="myTemplate" class="sys-template">
			<!--* if (Index % 2 == 0) { *-->
			<table class="productTableAlt">
				<tr>
					<td class="productName">
						{{ ProductName }}
					</td>
					<td>
						{{ "$" + UnitPrice }}
					</td>
				</tr>
			</table>
			<!--* } else { *-->
			<table class="productTable">
				<tr>
					<td class="productName">
						{{ ProductName }}
					</td>
					<td>
						{{ "$" + UnitPrice }}
					</td>
				</tr>
			</table>
			<!--* } *-->
		</div>

		<script type="text/javascript">
			
			function onNodeDataBound(sender, args) {
				var node = args.get_node();
				var dataItem = args.get_dataItem();

				dataItem.Index = node.get_index();
				var template = new Sys.Preview.UI.Template.getTemplate($get("myTemplate"));
				template.createInstance(node.get_textElement(), dataItem);
				
				node.get_textElement().style.display = "inline-block";
				node.get_textElement().style.verticalAlign = "top";
			}
		</script>
	</div>
	</form>
</body>
</html>
