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
Tom Nielsen
Development
Myron Anderson
Quality Assurance
Jenna Croft
Code Review
Lucy Farraday
Fix Bugs
Myron Scholes
Write Blog
Myron Anderson
Development
Jenna Croft
Development
Jenna Croft
Sales Presentation
Tom Nielsen
Customer meeting
Isabelle Meyers
Business lunch
Tom Nielsen
Create Unit Tests
Jenna Croft
Customer meeting
Erik Farraday
Read newspapers
Lucy Farraday
Staff meeting
Isabelle Meyers
Morning meeting
Myron Scholes
Quality Assurance
Isabelle Meyers
Design Architecture
Isabelle Meyers
Quality Assurance
Myron Anderson
Morning meeting
Jenna Croft
Development
Tom Nielsen
Interview
Tom Nielsen
Attend Seminar
Tom Nielsen
Development
Erik Farraday
Staff meeting
Myron Anderson
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: