America/US Samples
Europe Samples
Asia Samples

Gaia Ajax: GridView

The Gaia Ajax GridView displays the values of a data source in a table where each column represents a field and each row represents a record. It inherits from the ASP.NET GridView, and has built-in Ajax behaviour.

In this sample we are showing the power of the Gaia Ajax GridView just using markup. Edit, Delete, Select, Paging and Sorting is all ready using the flexible ObjectDataSource.

 IdStatusContact PersonActivity NameActivity DateIs Checked
Edit Delete Select11Bill HopkinsInterview2/8/2010 10:44:42 AM
Edit Delete Select21Cindy FitzgeraldRead newspapers2/9/2010 4:10:42 AM
Edit Delete Select31Isabelle HopkinsBusiness lunch2/7/2010 7:31:42 AM
Edit Delete Select41Isabelle HopkinsInterview2/9/2010 6:33:42 AM
Edit Delete Select51Bill HopkinsFix Bugs2/8/2010 2:22:42 AM
Edit Delete Select61Bill HopkinsMorning meeting2/6/2010 2:33:42 AM
Edit Delete Select71Isabelle HopkinsCreate Unit Tests2/10/2010 11:16:42 AM
Edit Delete Select81Bill HopkinsDevelopment2/11/2010 11:00:42 AM
Edit Delete Select91Bill HopkinsSales Presentation2/10/2010 9:53:42 PM
Edit Delete Select101Bill HopkinsDeliver speech2/8/2010 7:00:42 AM

 

Markup (ASPX/.aspx)

   1:  <gaia:GridView 
   2:      ID="zGridView" 
   3:      runat="server" 
   4:      Width="100%"
   5:      AllowPaging="True" 
   6:      AllowSorting="True" 
   7:      DataKeyNames="Id"
   8:      DataSourceID="zObjectDataSource" 
   9:      AutoGenerateColumns="False">
  10:      <Columns>
  11:          <gaia:CommandField 
  12:              ShowEditButton="true" 
  13:              ShowDeleteButton="true" 
  14:              ShowSelectButton="true" />
  15:          <gaia:BoundField 
  16:              DataField="Id" 
  17:              HeaderText="Id" 
  18:              SortExpression="Id"
  19:              ReadOnly="true" />
  20:          <gaia:BoundField 
  21:              DataField="Status" 
  22:              HeaderText="Status" 
  23:              SortExpression="Status"
  24:              ControlStyle-Width="30px" />
  25:          <gaia:BoundField 
  26:              DataField="ContactPerson" 
  27:              HeaderText="Contact Person"
  28:              SortExpression="ContactPerson"
  29:              ControlStyle-Width="100px" />
  30:          <gaia:BoundField 
  31:              DataField="ActivityName" 
  32:              HeaderText="Activity Name"
  33:              SortExpression="ActivityName"
  34:              ControlStyle-Width="100px" />
  35:          <gaia:BoundField 
  36:              DataField="ActivityDate" 
  37:              HeaderText="Activity Date"
  38:              SortExpression="ActivityDate" 
  39:              ReadOnly="true" />
  40:          <gaia:CheckBoxField 
  41:              DataField="IsChecked" 
  42:              HeaderText="Is Checked"
  43:              SortExpression="IsChecked" 
  44:              ItemStyle-HorizontalAlign="Center" />
  45:      </Columns>
  46:  </gaia:GridView>
  47:  <asp:ObjectDataSource 
  48:      EnablePaging="False" 
  49:      TypeName="Gaia.WebWidgets.Samples.Utilities.CalendarController"
  50:      ID="zObjectDataSource" 
  51:      runat="server" 
  52:      SelectMethod="ListAsDataTable"
  53:      UpdateMethod="Update"
  54:      DeleteMethod="Delete">
  55:  </asp:ObjectDataSource>
  56: