America/US Samples
Europe Samples
Asia Samples

Gaia Ajax: GridView - Rich Inline Editing

To have an immediate editing experience and avoid extra steps when updating a grid, you can take advantage of putting controls into a TemplateField. In this sample we are using InPlaceEdit, DateTimePicker, RadioButtonList and CheckBox inside TemplateFields to update instantly update our data source.

This samples also shows easy it is to use connect an ObjectDataSource to your GridView. Here we only use SelectMethod="ListAsDataTable". The other updates are done in the code behind.

Edit the grid to see its status change here
Activity NameDatePerson NameStatusConfirmed
Write Blog
Cindy Fitzgerald
Staff meeting
Cindy Fitzgerald
Code Review
Tom Olsen
Development
Cindy Fitzgerald
Quality Assurance
Tom Olsen
Create Unit Tests
Cindy Fitzgerald
Code Review
Scott Diaz
Development
Tom Olsen
Development
Scott Diaz
Morning meeting
Cindy Fitzgerald
Hint: Click the text to edit directly.
Update Control

 

Markup (ASPX/.aspx)

   1:   
   2:  <div class="container-feedback">
   3:      <div class="container-feedback-area">
   4:          <img 
   5:              runat="server"
   6:              alt="" 
   7:              class="container-feedback-area-tag"
   8:              src="~/media/contentImages/tag.png" />
   9:          <gaia:Label
  10:              runat="server" 
  11:              ID="status"
  12:              CssClass="container-feedback-area-status"
  13:              Text="Edit the grid to see its status change here" />
  14:      </div>
  15:  </div>
  16:  <gaia:GridView 
  17:      ID="zGrid" 
  18:      runat="server" 
  19:      Width="100%"
  20:      DataSourceID="zObjectDataSource"
  21:      AutoGenerateColumns="False">
  22:      <Columns>
  23:          <asp:TemplateField HeaderText="Activity Name">
  24:              <ItemStyle Width="175px" />
  25:              <ItemTemplate>
  26:                  <gaia:InPlaceEdit 
  27:                      SingleLine="true" 
  28:                      HasButtons="false"
  29:                      MouseClicksToTriggerEditMode="SingleClick"
  30:                      runat="server"
  31:                      CssClass="inplaceedit"
  32:                      OnTextChanged="ActivityNameTextChanged"
  33:                      Text='<%# Eval("ActivityName")%>' />
  34:              </ItemTemplate>
  35:          </asp:TemplateField>
  36:          <asp:TemplateField HeaderText="Date" ItemStyle-CssClass="itemCenterDate">
  37:              <ItemTemplate>
  38:                  <gaia:DateTimePicker 
  39:                      runat="server" 
  40:                      Width="100px"
  41:                      Value='<%# Eval("ActivityDate")%>'
  42:                      CalendarWidth="200px" 
  43:                      Format="dd.MMM yy HH:mm" 
  44:                      OnSelectedDateChanged="DateChanged"
  45:                      HasDropDownButton="false"
  46:                      HasTimePart="true" />
  47:              </ItemTemplate>
  48:          </asp:TemplateField>
  49:          <asp:TemplateField HeaderText="Person Name">
  50:              <ItemStyle Width="175px" />
  51:              <ItemTemplate>
  52:                  <gaia:InPlaceEdit 
  53:                      SingleLine="true" 
  54:                      HasButtons="false"
  55:                      MouseClicksToTriggerEditMode="SingleClick"
  56:                      runat="server"
  57:                      OnTextChanged="ContactPersonTextChanged"
  58:                      CssClass="inplaceedit"
  59:                      Text='<%# Eval("ContactPerson")%>' />
  60:              </ItemTemplate>
  61:          </asp:TemplateField>
  62:          <asp:TemplateField HeaderText="Status" ItemStyle-CssClass="itemCenter">
  63:              <ItemTemplate>
  64:                  <gaia:RadioButtonList 
  65:                      runat="server" 
  66:                      AutoPostBack="true" 
  67:                      OnSelectedIndexChanged="StatusChanged"
  68:                      RepeatDirection="Horizontal" 
  69:                      RepeatLayout="Flow" 
  70:                      SelectedValue='<%# Eval("Status") %>'>
  71:                      <Items>
  72:                          <asp:ListItem Value="1" Text="Yes" />
  73:                          <asp:ListItem Value="2" Text="No" />
  74:                      </Items>
  75:                  </gaia:RadioButtonList>
  76:              </ItemTemplate>
  77:          </asp:TemplateField>
  78:          <asp:TemplateField HeaderText="Confirmed" ItemStyle-CssClass="itemCenter">
  79:              <ItemTemplate>
  80:                  <gaia:CheckBox 
  81:                      runat="server" 
  82:                      AutoPostBack="true" 
  83:                      OnCheckedChanged="IsCheckedChanged"
  84:                      Checked='<%# Eval("IsChecked") %>' />
  85:              </ItemTemplate>
  86:          </asp:TemplateField>
  87:      </Columns>
  88:  </gaia:GridView>
  89:  Hint: Click the text to edit directly.
  90:  <gaia:Panel 
  91:      runat="server" 
  92:      ID="updateControl"
  93:      CssClass="container-updatecontrol">
  94:          <img runat="server" style="float:right;" alt="Update Control" src="~/media/contentImages/ajax-loader.gif" />
  95:  </gaia:Panel>
  96:  <asp:ObjectDataSource
  97:      ID="zObjectDataSource"
  98:      TypeName="Gaia.WebWidgets.Samples.BasicControls.GridView.RichInlineEditing.Default"
  99:      runat="server" 
 100:      SelectMethod="ListAsDataTable">
 101:  </asp:ObjectDataSource>
 102: