Blog

Ajax Master/Detail Page with the WebDataGrid - ASPX Code

Craig Shoemaker / Thursday, November 6, 2008 
   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>