1: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2:
3: <html xmlns="http://www.w3.org/1999/xhtml">
4: <head runat="server">
5: <title></title>
6: <style type="text/css">
7: .none
8: {
9: display:none;
10: }
11: </style>
12: <script type="text/javascript">
13: var lastRow = null;
14: var PK_COL_INDEX = 1;
15:
16: function cellChanged() {
17: var grid = $find("dg");
18: var behav = grid.get_behaviors();
19: var activation = behav.get_activation();
20: var activeCell = activation.get_activeCell();
21: var row = activeCell.get_row();
22:
23: if (row != lastRow) {
24: var id = $get("b" + row.get_index()).innerHTML;
25: lastRow = row;
26:
27: PageMethods.GetDetails(id, onSuccess, onFail);
28: }
29: }
30:
31: function onSuccess(response) {
32: $get("details").style.display = "block";
33: var ttl = $get("ttl");
34: ttl.innerHTML = response.Title;
35: ttl.href = response.Url;
36: $get("author").innerHTML = response.Author;
37: $get("pubDate").innerHTML = response.PublishDateShort;
38: $get("price").innerHTML = response.PriceFormatted;
39: }
40:
41: function onFail() {
42: alert("Many bad things happened here.");
43: }
44: </script>
45: </head>
46: <body>
47: <form id="form1" runat="server">
48: <asp:ScriptManager EnablePageMethods="true"
49: ID="sm" runat="server" />
50: <ig:WebDataGrid ID="dg" AutoGenerateColumns="False" runat="server">
51: <Behaviors>
52: <ig:Activation>
53: <ActivationClientEvents ActiveCellChanged="cellChanged" />
54: </ig:Activation>
55: </Behaviors>
56: <Columns>
57: <ig:TemplateDataField Key="Title">
58: <ItemTemplate>
59: <asp:Placeholder runat="server">
60: <%# DataBinder.Eval(((Infragistics.Web.UI.TemplateContainer)Container).DataItem, "Title") %>
61: <span id="b<%# this.index++.ToString() %>" class="none"><%# DataBinder.Eval(((Infragistics.Web.UI.TemplateContainer)Container).DataItem, "ID")%></span>
62: </asp:Placeholder>
63: </ItemTemplate>
64: <Header Text="Name" />
65: </ig:TemplateDataField>
66: </Columns>
67: </ig:WebDataGrid>
68: <div id="details" class="none">
69: <h2><a id="ttl"></a></h2>
70: <table cellpadding="3" cellspacing="3"
71: border="1" style="border-collapse:collapse;">
72: <tr>
73: <td>Author</td>
74: <td id="author"></td>
75: </tr>
76: <tr>
77: <td>Publish Date</td>
78: <td id="pubDate"></td>
79: </tr>
80: <tr>
81: <td>Price</td>
82: <td id="price"></td>
83: </tr>
84: </table>
85: </div>
86: </form>
87: </body>
88: </html>