<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<style type="text/css">
.sys-template { display: none; } .selItem { background-color: #ffcccc; } .selButton { text-align: center; text-decoration: underline; color: Blue; cursor: pointer }
</style>
</head>
<body xmlns:sys="javascript:Sys"
xmlns:dataview="javascript:Sys.UI.DataView" sys:activate="*" >
<form id="form1" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server">
<Scripts>
<asp:ScriptReference Path="~/js/jquery-1.2.6.js" />
<asp:ScriptReference Path="~/js/MicrosoftAjaxTemplates.debug.js" />
</Scripts>
</asp:ScriptManager>
<script type="text/javascript">
var people = [
{ Id: "A01", Name: "Jeffrey Lee", Score: 32767, RecTime: new Date()
},
{ Id: "A02", Name: "Fox Mulder", Score: 6242.25,
RecTime: Date.parseInvariant("2008-11-05 12:00:50", "yyyy-MM-dd HH:mm:ss")
},
{ Id: "A03", Name: "Dana Scully", Score: 8391.66, RecTime: new Date(2008, 6, 15)
}
];
</script>
<table border="1" cellspacing="0" cellpadding="0" style="font-size: 9pt; width: 300px;">
<thead>
<tr><th>Id</th><th>Name</th><th>Score</th><th>Record Time</th></tr>
</thead>
<tbody id="tbTemplate" class="sys-template" style="padding: 3px;"
sys:attach="dataview"
dataview:data="{{ people }}" dataview:selecteditemclass="selItem"
>
<tr>
<td class="selButton" sys:command="select">{{Id}}</td> <td>{{ Name }}</td> <td style="text-align: right;">{{Score.format("N2")}}</td> <td style="text-align: center;">
{{RecTime.format("yyyy/MM/dd HH:mm:ss")}} </td>
</tr>
</tbody>
</table>
</form>
</body>
</html>